0

我一直在使用 angular 4 和 flex 布局库（Flex 布局库）我发现 api 令人困惑，并检查了几个示例，但我只是不知道如何使用这个库实现简单的调整大小的行/列结构。我想用 flex 布局库实现以下引导代码。我将如何使用 flex 布局创建这个引导网格示例？

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-md-4">
      Left column
    </div>
    <div class="col-sm-8 col-md-4">
      center column
    </div>
    <div class="col-sm-2 col-md-4">
      Right column
    </div>
  </div>
</div>

任何有关如何做到这一点的帮助将不胜感激。谢谢！

4

2 回答 2

0

需要记住的一件事：与 Bootstrap 不同，如果您未在 Flex 中指定其中一个媒体查询，它将回退到最大的指定值。因此，如果您忘记指定fxFlex.xs="25"，它将从fxFlex.lg="33"而不是 fxFlex.sm="25" 中获取值。

<div fxLayout="column" fxLayoutAlign=" none">
  <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="space-around stretch" fxLayout.xs="column">
    <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="33" fxFlex.lg="33" fxFlex.xl="33"></div>
    <div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex.xl="33"></div>
    <div fxFlex.xs="25" fxFlex.sm="25" fxFlex.md="33" fxFlex.lg="33" fxFlex.xl="33"></div>
  </div>
</div>
于 2019-01-10T09:27:16.767 回答
0

https://github.com/angular/flex-layout/wiki/Responsive-API

您应该使用中的部分

媒体查询和别名

结果应该与此类似

<div fxFlex="20%"  fxFlex.md="40%">dummy div</div>
于 2017-08-23T13:21:30.857 回答