Angular 2 材料和 flex-layout 对齐 [英] Angular 2 material and flex-layout alignment
问题描述
我正在尝试使用 angular 2 材质和 flex-layout 来创建响应式元素库.几个小时后,我仍然无法让我的元素居中:
这是源代码:
<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>元素</md-card-title></md-card-header><img md-card-image src="http://placehold.it/350x200"><md-card-content><p>逻辑推理</p></md-card-content></md-card>
我为 fxFlexAlign
尝试了不同的值(https://github.com/angular/flex-layout/wiki/API-Documentation) 但它们都没有实现我所需要的,即让元素居中,或者换句话说,分布红色方块空间在右侧和左侧之间.
有没有办法做到这一点?
编辑
不幸的是,如果我有动态数量的项目,justify-content: space-between;
不起作用.最终,它们将换行,然后最后一行中的项目将不会像预期的那样:
.container {显示:弹性;宽度:100%;flex-flow:row wrap;对齐内容:间隔;}.堵塞 {宽度:100px;高度:100px;边框:1px 纯红色;}
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意
<div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem">...你满意