Question

我正在尝试使用https://tburleson-layouts-demos.firebaseapp.com/#/docs中提到的角度弯曲布局来构建角度材料应用程序，我尝试了各种组合，但是没有任何效果适合我。我正在尝试在工具栏下构建几张卡片，该卡片应占据大约70％的区域，居中对齐，但最终它们会占用所有空间。我的html是

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

如果我在CSS类中添加width：66％，它可以工作，但是为什么我不能仅用fxFlex来做到这一点？

按照手册的建议。

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66%" fxLayoutAlign="center center">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

也没有作用

Answer 1

您错过了fxFlex =“ 66％”中的％，并且还想居中对齐，请添加fxLayoutAlign =“ center center”。 fxLayoutAlign中的第一个参数用于主轴，第二个参数用于横轴。

Answer 2

此链接可能对您有所帮助； layouts-demos

编辑;如果您的伸缩方向是行，则可以将其居中放置（如果您也想垂直居中，则将“无”更改为“居中”）检查链接以获取有关伸缩布局的更多信息。

如何使用角度伸缩布局居中对齐项目

2 个答案: