flex 布局无法正常工作答案

【问题标题】：flex layout not working properlyflex 布局无法正常工作
【发布时间】：2018-04-02 13:56:17
【问题描述】：

我在 Angular 4 中使用 flex 布局模块，我尝试在桌面模式下并排显示卡片布局，并且在移动模式下它应该是一比一，但它对我不起作用请建议正确的代码。

下面是我的代码：

<div fxLayout="row" fxLayout-gt-xs="column">
     <mat-card fxflex fxflex-gt-xs="100"  fxFlex="33.33%">
          <h2>Card title #1</h2>
              <mat-card-content>
                  <p>Some content</p>
              </mat-card-content>
     </mat-card>
     <mat-card fxflex  fxflex-gt-xs="100" fxFlex="33.33%">
          <h2>Card title #2</h2>
              <mat-card-content>
                   <p>Some content</p>
              </mat-card-content>
     </mat-card>

使用这个版本：@angular/flex-layout：^2.0.0-beta.9

【问题讨论】：

您应该提供一个 JSFiddle 以便于调试。

标签： css flexbox angular-material angular-flex-layout

【解决方案1】：

默认情况下，块元素放置在不同的行中。您只需要处理 xs 屏幕的方向。

使用这个：-

<div fxLayout.xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
    <h2>Card title #1</h2>
    <mat-card-content>
        <p>Some content</p>
    </mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
    <h2>Card title #2</h2>
    <mat-card-content>
        <p>Some content</p>
    </mat-card-content>
</mat-card>
</div>

【讨论】：