Angular 2 材质和 flex-layout 对齐

Posted 2023-03-06

【中文标题】Angular 2 材质和 flex-layout 对齐

【英文标题】：Angular 2 material and flex-layout alignment

【发布时间】：2017-07-21 21:18:32

【问题描述】：

我正在尝试使用 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>

【参考方案1】：

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

添加fxLayoutAlign="center" 对我有用，结果现在位于中心。

【参考方案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>

【参考方案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