Question

我一直在使用angular 4和flex布局库（Flex layout library）我发现api令人困惑，并检查了几个例子，我只是不知道如何实现一个简单的调整大小的行/列结构图书馆。我想用flex布局库实现以下bootstrap代码。如何使用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>

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

Answer 1

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

您应该使用

中的部分

MediaQueries和别名

结果应与此

相似

<div fxFlex="20%"  fxFlex.md="40%">dummy div</div>

Answer 2

要记住的一件事：与Bootstrap不同，如果您未在Flex中指定一个媒体查询，它将退回到最大的指定值。因此，如果您忘记指定 fxFlex.xs =“ 25” ，它将采用 fxFlex.lg =“ 33” 中的值，而不是fxFlex.sm =“ 25”。 / p>

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

如何实现一个简单的响应行/列结构，类似于这个bootstrap示例与angular4的flex布局？

2 个答案: