如何比较 Angular Flex Layout 和 Bootstrap 4 网格系统?

How to compare Angular Flex Layout to Bootstrap 4 grid system?

我习惯于使用 Bootstrap 工作,对我来说网格系统在我的脑海中非常清晰。现在,我正在尝试使用 Angular Flex Layout,即使阅读文档,我也不明白如何使用它。

例如,我有以下代码使用 Bootstrap 4:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8 col-lg-4">
      Something...
    </div>
    <div class="col-sm-12 col-md-8 col-lg-4">
      Something...
    </div>
    <div class="col-sm-12 col-md-8 col-lg-4">
      Something...
    </div>
  </div>
</div>

如何使用 Angular Flex Layout 编写相同的代码?

在 angular-flex-layout 中我们没有网格,因此您必须以这种方式处理它才能获得与使用 bootstrap 网格系统相同的结果:

<div fxLayout="row wrap"
     fxLayout.sm="column"  >

    <div fxFlex.lg="33.333%" fxFlex.md="66.667%"  fxFlex.lt-sm="100%" style="background-color:red">
        first-section
    </div>
    <div fxFlex.lg="33.333%" fxFlex.md="66.667%"  fxFlex.lt-sm="100%" style="background-color:blue">
        second-section
    </div>
    <div fxFlex.lg="33.333%" fxFlex.md="66.667%"  fxFlex.lt-sm="100%" style="background-color:yellow">
        third-section
    </div>
</div>

请注意响应断点可能不同。