角度2材料和柔性布局對齊

Question

我正在嘗試使用角度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％值才能獲得更完美的結果。

 .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%; } 

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

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
}