角2材料和彈性佈局alignement

Question

我想使用角2材料和彈性佈局來創建一個響應式的元素庫。之後幾個小時，我還是不能有我的元素爲中心：

這是源代碼：

<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

在Flexbox的傳播塊屬性

到母塊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>

Answer 2

你可以試試這個概念來獲得類似的功能。您可能需要編輯css％值才能獲得更完美的結果。

.sp{ 
 
\t display: flex; 
 
\t justify-content: center; 
 
} 
 

 
.i{ 
 
\t width: 23%; 
 
    height: 133px; 
 
    background-color: grey; 
 
    margin: 3px; 
 
    color: #fff; 
 

 
} 
 

 
.p{ 
 
\t 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

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

添加fxLayoutAlign="center"制定了我，結果現在的定位在中心。

Answer 4

晚來回答，但其動態項目的工作，我無法找到確切的公式

我的公式是

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 
}