CSS - 如何正确使用 flex-basis？

Question

我正在设置我自己的网格组件。我制作了一个行组件，它有一个display:flex; flex-wrap: wrap 和动态gap、column-gap 和row-gap。我有一个列组件，我在其中设置了动态弹性基础。我试着这样使用它：

<Row :gap="30">
  <Column :w="50">
    Text
  </Column>
  <Column :w="50">
    Text
  </Column>
  <Column :w="50">
    Text
  </Column>
</Row>

我正在将50 转换为百分比作为弹性基础。事实证明，由于间隙，它包裹了所有物品。我是否使用了 flex-basis 错误？还有其他方法来设置我的列吗？

Answer 1

#main {
  width: 270px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
}

<row id="main">
  <div style="background-color:coral;">50px</div>
  <div style="background-color:lightblue;">50px</div>
  <div style="background-color:khaki;">50px</div>
  <div style="background-color:pink;">50px</div>
  <div style="background-color:lightgrey;">50px</div>
</row>

Answer 2

当您在 flex-basis 中指定长度时，您是在指定单个项目沿 flex 轴的长度。当您以这种方式指定百分比时，百分比等于父容器大小的一小部分！您可以在MDN's flex-basis definition 中看到这一点，在“值”部分解释了您可以赋予此属性的可能值：

绝对 、父 flex 容器的主要大小属性的 或关键字 auto。负值无效。默认为自动。

这意味着，假设你的 flex 是一行：

• 如果您指定flex-basis: 200px，则每个弹性项目的宽度将为 200 像素。
• 如果您指定flex-basis: 25%，则每个弹性项目的宽度将为父宽度的 25%。如果父容器为 100 像素，则它们的宽度均为 25 像素。

出于 flex wrapping 的目的，除了 flex 基础之外，还必须考虑定义的任何间隙。如果您有 flex-basis: 25% 加上 25% 的间隙，则该弹性项目占据容器宽度的 50%。

你的行被环绕并不奇怪——你已经将它们共同定义为它们父宽度的 150%！间隙也会使事情变得更糟：50% 的宽度加上任何间隙意味着单元格必须占据一半以上的水平空间，因此不可能有列。

如果您希望沿行进行小数大小调整，其中每个元素占据其父宽度的相等份额，您应该使用带有grid-auto-columns: 1fr 的 CSS Grid。如果您需要单元格间隙，则尤其如此：当您定义具有分数大小的网格单元格和间隙时，可以同时考虑两者。

下面的 sn-p 演示了以下内容：

1. 在宽度为 200 像素的 flex 框中定义精确的 flex-basis
2. 在相同的 flex 框中定义百分比 flex-basis
3. 在一行中使用 CSS Grid
4. 将 CSS Grid 与换行结合使用

.flex-absolute-width,
.flex-relative-width,
.grid,
.grid-wrapped {
  width: 200px;
  border: 1px solid blue;
  gap: 8px;
}

.cell {
  outline: 1px dashed red;
}

.flex-absolute-width,
.flex-relative-width {
  display: flex;
  flex-flow: row wrap;
}

.flex-absolute-width .cell {
  flex-basis: 50px;
}

.flex-relative-width .cell {
  flex-basis: 50%;
}

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* each column shares 1fr width */
  grid-auto-flow: column; /* prefer to flow into new columns */
}

.grid-wrapped {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

Flex-basis 50px:
<div class="flex-absolute-width">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

Flex-basis 50%:
<div class="flex-relative-width">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

A grid with each column being told to use the same fraction of width:
<div class="grid">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

A wrapped grid with each column being told to use the same fraction of width:
<div class="grid-wrapped">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>