网格系统中使用 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>

Answer 2

您的代码的问题是 parent flex 容器中的 fxLayoutGap="1px" 以及您的 flex children.[=16 中的 fxFlex="calc(25% - 1px)" 的组合=]

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

如果你真的想保持差距，我建议你保持一致并使用百分比，如下例所示： Here is the working stackBlitz

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

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

Same size of the last items with Flex Layout in the grid system

css

flexbox

angular-flex-layout

angular