时间戳

首页 > 解决方案 > CSS flex：奇怪的行为

css - CSS flex：奇怪的行为

问题描述

请考虑以下示例：

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 的这种行为......为什么z1els 没有一个接一个地对齐，就好像你申请flex-direction: column它一样？它背后的逻辑是什么，是否有一种让它“自动”切换的好方法，flex-direction: column就像在这个例子中一样？

更新：似乎我没有正确解释自己。请尝试使用未注释属性的上述示例flex-direction并查看所需的行为

标签： cssflexbox

解决方案

原因是因为 flex 父级的高度为 1000px，元素之间的空间是平均分布的。

如果您希望项目一个接一个地出现，则必须设置align-content : start为您的 flex 父级，并且应该很好。

我假设您将 min-width 设置为 51% 只是为了测试而不是其他。

这是更新的小提琴：https ://jsfiddle.net/81nrf6ug/

推荐阅读