Question

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

假设我有一个由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来显示此可能的解决方案（宽度填充：3像素）：

<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"，您将获得所需的行为。 但是，这将导致您的缺口被消除。

如果您真的想保持差距，我建议您保持一致，并使用以下示例所示的百分比： 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布局的最后一项的大小相同

2 个答案: