Question

我正在尝试使用angular 2材质和flex-layout来创建响应式元素库。几个小时后，我仍然无法将我的元素集中在一起：

这是源代码：

<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>

我为fxFlexAlign（https://github.com/angular/flex-layout/wiki/API-Documentation）尝试过不同的值，但是没有一个能达到我的需要，也就是说，让元素居中，换句话说，分配红色方块空间右侧和左侧。

有没有办法实现这个目标？

修改

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

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

Answer 1

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

为我添加fxLayoutAlign="center"，结果现在位于中心位置。

Answer 2

您可以尝试这个概念来实现类似的功能。您可能需要编辑css％值才能获得更完美的结果。

＆＃13;

.sp{
	display: flex;
	justify-content: center;
}

.i{
	width: 23%;
    height: 133px;
    background-color: grey;
    margin: 3px;
    color: #fff;

}

.p{
	  display: flex;
    flex-wrap: wrap;
    width: 56%;
}

＆＃13;

<div class="sp">
  <div class="p">
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
        <div class="i"> content </div>
</div>
</div>

＆＃13;

Answer 3

迟到回答但是它对动态项目的工作，我找不到确切的公式

我的公式是

margin-bottom = (100 - (total item in row * fxFlex on item)) / total space between item in row

实施例

margin-bottom = (100 - (5 * 19) ) / 4
margin-bottom = (100 - 95) / 4
margin-bottom = 5 / 4 = 1.25%

关于你的代码 HTML

<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="space-between">
    <!-- margin-bottom = gt-md = 1.25%, md = 6.5% , sm  = 22% !-->
    <md-card fxFlex.gt-md="19" fxFlex.md="29"  fxFlex.sm="39" 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>

<强> CSS

md-card {
  margin-bottom: 6.25%; // md flex 29

  // this commented margin is the responsive margin calculation you must implement
  // margin-bottom: 1.25%; // gt-md flex 19
  // margin-bottom: 22%; // sm flex 39
  // margin-bttom : 2%; // sm flex 49 better use this one
}

角度2材料和柔性布局对齐

3 个答案: