如何使用角度弹性布局居中对齐项目答案

【问题标题】：how to center align item using angular flex layout如何使用角度弹性布局居中对齐项目
【发布时间】：2019-01-15 02:51:51
【问题描述】：

我正在尝试使用 https://tburleson-layouts-demos.firebaseapp.com/#/docs 中提到的 angular flex 布局构建 angular material 应用程序，我尝试了各种组合，但没有任何东西对我有用。我正在尝试在工具栏下构建几张卡片，这些卡片应该占据大约 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>

也没有成功

【问题讨论】：

这个问题有什么问题吗？

标签： angular angular-flex-layout

【解决方案1】：

您错过了 fxFlex="66%" 中的 % 以及居中对齐添加 fxLayoutAlign="center center"。 fxLayoutAlign 中的第一个参数是主轴，第二个是交叉轴。

【讨论】：

我确实尝试过使用 % 符号和中心中心，但它不起作用

【解决方案2】：

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

编辑；如果您的 flex-direction 是行，您可以将其居中（如果您也想垂直居中，请将“none”更改为“center”）查看链接以获取有关 flex 布局的更多信息。

【讨论】：