使用 @angular/flex-layout 作为网格布局

Posted 2023-03-07

【中文标题】使用 @angular/flex-layout 作为网格布局

【英文标题】：Use @angular/flex-layout as a grid layout

【发布时间】：2017-06-08 06:57:52

【问题描述】：

我正在尝试创建一个网格布局，例如使用 Angular 团队提供的 flex-layout。

这就是我想要的：

这就是我所拥有的：

我正在尝试仅使用具有wrap 参数的一行来执行此操作，因此更灵活：

<div class="widgets-row"
 fxLayout
 fxLayout.xs="column"
 fxLayoutAlign="start"
 fxLayoutWrap="wrap">
<div class="widget" fxFlex="100%">Large</div>
<div class="widget" fxFlex="50%">Medium</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>
<div class="widget widget-sm" fxFlex="25%">
    Small
</div>

基本上我需要最后一行包裹在另外两个“小”下面。

谢谢。

【参考方案1】：

我设法通过创建几种布局来做到这一点，一种用于大型小部件，一种用于中型小部件，一种用于小型小部件：

<div class="widgets-row"
    fxLayout
    fxLayout.xs="column"
    fxLayoutAlign="start"
    fxLayoutWrap="wrap">
    <div class="widget" fxFlex="100%">Large</div>
</div>

<div fxLayout
    fxLayout.xs="column"
    fxLayoutAlign="space-between"
    fxLayoutWrap="wrap">
    <div fxFlex="49%" class="widget"></div>
    <div fxLayout
        fxLayout.xs="column"
        fxLayoutWrap="wrap"
        fxLayoutAlign="space-around"
        fxFlex="49%">
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
        <div class="widget-sm" fxFlex="49%">Small</div>
    </div>
</div>

PS：第二个布局中 49% 的 Flex 是为了在小部件之间留出一些空间，以免它们粘在一起。

【讨论】：

酷！您是否尝试使用 fxLayoutGap="NNpx" 在小部件之间添加空间？

我正在做一个类似的任务，我需要创建多个可以由用户切换的布局。你最终是如何实现切换的？您是否为每种类型创建了单独的布局组件？ （即列布局组件、列表布局组件等）？

对于那些使用最新版本的人，请注意 fxLayoutWrap 已被弃用。请改用 fxLayout="row wrap"。