Question

我曾经使用过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编写相同的代码？

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

请注意，响应性断点可能会有所不同。

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

1 个答案: