角2材料和弹性布局alignement

问题描述：

我想使用角2材料和弹性布局来创建一个响应式的元素库。之后几个小时，我还是不能有我的元素为中心：角2材料和弹性布局alignement

这是源代码：

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

答

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

它不会与项目动态数工作，因为你可以在我已经加入到OP的片段看到:( – mario595

答

你可以试试这个概念来获得类似的功能。您可能需要编辑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>

答

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

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

答

晚来回答，但其动态项目的工作，我无法找到确切的公式

我的公式是

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材料和弹性布局alignement

相关推荐