angular - 网格系统中使用 Flex Layout 的最后一项的大小相同

Question

我在使用 flex 布局网格系统时遇到问题。

假设我有一个包含 6 个元素的网格，我希望每行有 4 个元素。所以我会这样做:

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap="1px">
<div fxFlex="calc(25% - 1px)" fxLayoutAlign="center end" *ngFor="let item of items">
    <span fxFlex>{{ item }}</span>
</div>
</div>

此代码的问题在于第二行的最后两项与第一行的大小不同。它们的大小为全尺寸行的 50%，但第一行的元素将为全尺寸行的 25%。

那么我该怎么做才能让所有元素占两行的全尺寸行的 25%？

Answer 1

答案是使用 fxFlex="25" 而不是 fxFlex="calc(25% - 1px)" 并删除 fxLayoutGap 和例如，通过添加 padding: 1px 来解决这个问题。

我创建了一个 stackblitz显示这个可能的解决方案(宽度填充:3px):

<div fxFlex="100" fxLayout="row wrap">
    <div fxFlex="25" fxLayoutAlign="center end" *ngFor="let item of items" style="padding: 3px;">
        <span fxFlex>{{ item }}</span>
    </div>
</div>

如果您不想删除 fxLayoutGap，请改用 fxFlex="24"。

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap="1px">
    <div fxFlex="24" fxLayoutAlign="center end" *ngFor="let item of items">
        <span fxFlex>{{ item }}</span>
    </div>
</div>