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

Question

我正在设置自己的网格组件。 我做了一个行组件，它有一个display:flex; flex-wrap: wrap 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

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

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

这意味着，假设您的 flex 定向为一行：

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

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

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

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

下面的代码片段演示了以下内容：

1. 在宽度为 200px 的 flex 框中定义精确的 flex-basis
2. 在相同的 flex 框中定义百分比 flex-basis
3. 在单行中使用 CSS 网格
4. 使用带有包装的 CSS 网格

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

Answer 2

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