代码之家 › 专栏 › 技术社区 › C. Banzet

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

angular-flex-layout flexbox css3 angular css

0

C. Banzet · 技术社区 · 7 年前

我在使用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%的全尺寸行在两行上?

2 回复 | 直到 7 年前

1

2

Tommy Gihan Kaveendra 7 年前

答案是使用 fxFlex="25" 而不是 fxFlex="calc(25% - 1px)" fxLayoutGap 通过添加 padding: 1px 例如。

我已经创建了一个 stackblitz

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

如果不想删除 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>

2

0

Narm Rohit 7 年前

代码的问题是 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>