CSS flex：异常行为

Question

请考虑以下示例：

https://jsfiddle.net/mr4fapx7/1/

<div class="z">
  <div class="z1">1</div>
  <div class="z1">2</div>
  <div class="z1">3</div>
</div>

.z {
  display: flex;
  align-items: flex-start;
  /* flex-direction: column; */
  flex-wrap: wrap;
  height: 1000px;
  background: #900;
}
.z1 {
  min-width: 51%;
  background: #0f0;
}

我无法理解flex的这种行为...为什么z1个el并没有像您应用flex-direction: column那样一个接一个地对齐？背后的逻辑是什么，有没有办法使它像在本例中的flex-direction: column一样“自动”切换？

更新： 好像我没有正确解释自己。请尝试上面的示例使用未注释的flex-direction属性，然后查看所需的行为

Answer 1

原因是因为flex父级的高度为1000px，所以元素之间的间距是均匀分布的。

如果您希望这些项目一个接一个地出现，则必须将align-content : start设置为flex父对象，您应该会很好。

我假设您将最小宽度设置为51％，只是为了测试事物，而不是其他事情。

这里更新了小提琴：https://jsfiddle.net/81nrf6ug/

Answer 2

您尝试使用较小的最小宽度值还是删除了最小宽度属性。最小宽度为51％，如果您希望所有三列都在同一行中，则总计为153％，总宽度不应超过100％。