Question

我正在创建一个元素列表，并使用带有方向行的伸缩框将它们平均间隔为每行4个。我还需要一个带有flex方向列的周围容器，以在此下方包含更多元素。问题是，当我使用flex-basis属性时，有时会看到柔韧性盒的高度发生变化。

我尝试了4种不同的选择。这是它们的描述以及它们是否正确运行：

具有2个选项的Flex基础（行为不正确）
具有3个选项的Flex基础（行为不正确）
具有4个选项的Flex基础（行为正确）
没有伸缩性，只有最小宽度（行为正确）

这是我的flexbox中包含div的CSS（每行4个）。本质上，.box2正常工作，而.box1的行为异常。另外，这里是一个codepen来说明问题： 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中时遇到了另一个错误。

如果从flex-wrap: wrap中删除.container，则布局将按预期工作。看来您仍然不需要此规则。

还请注意，该错误在Chrome和Firefox中处于活动状态。但是您的原始代码在Edge中可以正常工作。

使用column wrap的Flex布局存在许多错误。这可能是当今Flexbox中漏洞最多的区域。这是另外两个示例：

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

Answer 2

实际上，您还在容器和盒子上添加了display flex属性。因此无需添加display：flex和flex-wrap：容器上的wrap属性，因为您已经在div框上添加了

。

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

伸缩容器的高度意外更改

2 个答案: