html - flex 容器的高度意外改变

Question

我正在创建一个元素列表，并使用带有方向行的 flexbox 将它们均匀地间隔开，每行 4 个。我还需要一个带有 flex 方向列的周围容器，以便在其下方包含更多元素。问题是，当我使用 flex-basis 属性时，有时会看到内部 flex 框的高度发生变化。

我尝试了 4 种不同的选择。以下是它们的描述以及它们的行为是否正确:

• 具有 2 个选项的 Flex Basis(行为不正确)
• 具有 3 个选项的 Flex Basis(行为不正确)
• 具有 4 个选项的 Flex Basis(行为正确)
• 没有 flex 基础，只有一个最小宽度(行为正确)

这是我的 flexbox 中包含的 div 的 CSS(每行 4 个)。本质上，.box2 工作正常，而 .box1 行为异常。 这里还有一个代码笔来说明这个问题: https://codepen.io/anon/pen/zVWMqb

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 5 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
    <div class='box1'>Option 5</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>

我希望选项列表下方没有空格，但是，在某些情况下，如代码笔中所示。我不希望文本占用比行高更多的空间，所以我很困惑在某些情况下额外的空间是从哪里来的，而在其他情况下则不是。

Answer 1

看起来您遇到了另一个在 flexbox 中包装列的错误。

如果从 .container 中删除 flex-wrap: wrap，布局将按预期工作。看来您无论如何都不需要这条规则。

另请注意，该错误在 Chrome 和 Firefox 中处于事件状态。但是您的原始代码在 Edge 中运行良好。

使用 column wrap 的 Flex 布局有很多错误。它可能是当今 flexbox 中 bug 最多的地方。这里还有两个例子:

• > When flexbox items wrap in column mode, container does not grow its width
• > Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap

.container {
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>