角度2材料和弹性布局对齐 [英] Angular 2 material and flex-layout alignement

问题描述

我正在尝试使用角度2材质和弹性布局来创建响应式的元素库。几个小时后，我仍然不能把我的元素集中：

这是源代码：

 < div fxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> 
 < 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> 
 Lorem Ipsum 
< / p> 
< / md-card-content> 
< / md-card> 
< / div> 
  

我已经为 fxFlexAlign https://github.com/angular/flex-layout/wiki/API-Documentation ），但是他们都没有达到我所需要的，也就是说，让元素居中，换句话说，分配右边和左边之间的红色方形空间。

有没有办法实现这个？

编辑

不幸的是， justify-content：空间之间; 不起作用，如果我有一个动态数量的项目。最后，他们将被包装在一个新的行，然后最后一行中的项目不会像预期的那样：

  .container {display：flex;宽度：100％; flex-flow：排行;证明内容：空间之间; } .block {width：100px;高度：100像素; border：1px solid red;}  

< div class = 容器 > < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...你的内容< / div> < div class =blockfxLayout ='row'fxLayoutWrap fxLayoutGap =2rem> ...您的内容< / div>< / div>

h2_lin>解决方案

< div fxLayout =rowfxLayoutWrap fxLayoutGap =2remfxLayoutAlign =center>


添加 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.

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