Angular 2 材料和 flex-layout 对齐 [英] Angular 2 material and flex-layout alignment

查看：30
本文介绍了Angular 2 材料和 flex-layout 对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 angular 2 材质和 flex-layout 来创建响应式元素库.几个小时后，我仍然无法让我的元素居中:

这是源代码:

<md-card fxFlex.gt-md="20" fxFlex.md="28" fxFlex.sm="40" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card"><md-card-header><md-card-title>元素</md-card-title></md-card-header><img md-card-image src="http://placehold.it/350x200"><md-card-content><p>逻辑推理</p></md-card-content></md-card>

我为 fxFlexAlign 尝试了不同的值(https://github.com/angular/flex-layout/wiki/API-Documentation) 但它们都没有实现我所需要的，即让元素居中，或者换句话说，分布红色方块空间在右侧和左侧之间.

有没有办法做到这一点?

编辑

不幸的是，如果我有动态数量的项目，justify-content: space-between; 不起作用.最终，它们将换行，然后最后一行中的项目将不会像预期的那样:

.container {显示:弹性；宽度:100%；flex-flow:row wrap;对齐内容:间隔；}.堵塞 {宽度:100px；高度:100px；边框:1px 纯红色；}

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意

解决方案

添加 fxLayoutAlign="center" 对我有用，结果现在位于中心.

I am trying to use angular 2 material and flex-layout to create a responsive gallery of elements. After hours and hours, I still can't have my elements centered:

This is the source code:

<div fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
  <md-card fxFlex.gt-md="20" fxFlex.md="28"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card">
    <md-card-header>
      <md-card-title>element</md-card-title>
    </md-card-header>
    <img md-card-image src="http://placehold.it/350x200">
    <md-card-content>
      <p>
        Lorem Ipsum
      </p>
    </md-card-content>
  </md-card>
</div>

I have tried different values for fxFlexAlign (https://github.com/angular/flex-layout/wiki/API-Documentation) but none of them achieves what I need, that is, having the elements centered or, in other words, distribute the red square space between the right and the left side.

Is there a way of achieving this?

EDIT

Unfortunately, justify-content: space-between; doesn't work if I have a dynamic number of items. Eventually, they will be wrapped in a new line, and then the item in the last row won't look as expected:

.container {
  display:flex;
  width:100%;
  flex-flow:row wrap;
  justify-content: space-between;

  
}
.block {
  width:100px;
  height:100px;
  border:1px solid red;
}

<div class="container">
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
  <div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">
   ... you content
  </div>
</div>

解决方案 

<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">

Adding fxLayoutAlign="center" worked out for me, the results are now positioned in center.

这篇关于Angular 2 材料和 flex-layout 对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆