网格系统中具有 Flex 布局的最后一个项目的大小相同

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来解决这个问题。

我创建了一个堆栈闪电战来展示这个可能的解决方案(宽度填充：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>

Answer 2

代码的问题在于父 flex 容器中的fxLayoutGap="1px"以及 flex 子容器中的fxFlex="calc(25% - 1px)"的组合。

如果您只是删除fxLayoutGap="1px"并将您的孩子更改为fxFlex="25"您将获得所需的行为。但是，这将导致您的差距被消除。

如果你真的想保持差距，我建议你保持一致并使用百分比，如以下示例所示：这是工作堆栈闪电战

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap=".2%">
<div fxFlex="24" fxLayoutAlign="center end">
<span style="background-color: green" fxFlex>1</span>
</div>
<div fxFlex="24" fxLayoutAlign="center end">
<span style="background-color: yellow" fxFlex>2</span>
</div>
<div fxFlex="24" fxLayoutAlign="center end">
<span style="background-color: blue" fxFlex>3</span>
</div>
<div fxFlex="24" fxLayoutAlign="center end">
<span style="background-color: orange" fxFlex>4</span>
</div>
<div fxFlex="24" fxLayoutAlign="center end">
<span style="background-color: pink" fxFlex>5</span>
</div>
<div fxFlex="24" fxLayoutAlign="center end">
<span style="background-color: red" fxFlex>6</span>
</div>
</div>