如何将 Angular Flex Layout 与 Bootstrap 4 网格系统进行比较？

Posted 2023-03-06

【中文标题】如何将 Angular Flex Layout 与 Bootstrap 4 网格系统进行比较？

【英文标题】：How to compare Angular Flex Layout to Bootstrap 4 grid system?

【发布时间】：2019-11-22 05:52:24

【问题描述】：

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

例如，我有以下使用 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 编写相同的代码？

【参考方案1】：

在 angular-flex-layout 中我们没有网格，因此您必须以这种方式接近它才能达到与使用引导网格系统相同的结果：

<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>

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

【讨论】：

太棒了！非常感谢，这正是我需要的。 Bootstrap 中的 怎么样？有没有类似的方式来使用 flex 布局来表示它？

@MuriloGóesdeAlmeida 不，不幸的是，它没有为您提供那些类型的东西，它只是帮助您使用 flex 作为标签属性，而不是自己在 css 中做这些。

@MuriloGóesdeAlmeida github.com/angular/flex-layout/wiki，这是非常具体的文档，其中还包含一些 stackblitz 演示，因此您可以继续玩玩