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

Question

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

<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's flex-basis definition的“值”一节中看到这一点，该部分解释了可以为此属性提供的可能值：

<‘宽度’>

一个绝对值、父flex容器的main size属性的a或关键字auto。负值无效。默认为auto。

这意味着，假设您的flex是以行为方向的：

• 如果指定flex-basis: 200px，flex项的宽度将为200px。
• 如果指定flex-basis: 25%，flex项的宽度将为父项宽度的25%。如果父容器是100px，那么它们的宽度将分别为25px。

对于flex包装的目的，除了flex基础之外，还必须遵守定义的任何间隙。如果您有flex-basis: 25%加上25%间隙，那么flex项占据容器宽度的50%。

您的行将被换行并不奇怪--您已经将它们共同定义为其父宽度的150%！间隙还会使情况恶化: 50%的宽度加上任何间隙都意味着单元格必须占据一半以上的水平空间，因此不可能有列。

如果您希望沿行按比例调整大小，其中每个元素占据其父元素宽度的相等份额，则应将CSS Grid与grid-auto-columns: 1fr一起使用。如果您想要单元格间距，这一点尤其重要:当您定义具有分数大小和间距的栅格单元格时，可以同时考虑这两种情况。

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

1. 在带有200px width
2. Defining的弹性框中定义精确的弹性基础在相同的弹性框中定义百分比弹性基础
3. 在单行中使用CSS
5. 使用带有包装的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>

​