如何确保 Flexbox 子项占用可用的垂直空间？

确保 Flexbox 子项占据可用的垂直空间

当使用具有多列的 Flexbox 布局时，可能希望子项占据不同的垂直空间高度以充分利用可用空间，而不是受限于该行最高的高度

解决问题

Flexbox 行的自然行为是在指定空间内垂直对齐项目。不过，为了防止item拉伸到行的整个高度，可以使用align-items属性来控制垂直对齐。

解决方案

来实现想要的行为，将align-items属性设置为flex-start：

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

这将允许孩子们保留其固有高度，同时保持行的垂直对齐。

其他选项

如果所需的布局需要更复杂的间距行为，请考虑使用列方向或多列模块来实现期望的结果。有关更多信息，请参阅 https://stackoverflow.com/a/20862961/1652962 上的综合 SO 答案。

以上是如何确保 Flexbox 子项占用可用的垂直空间？的详细内容。更多信息请关注PHP中文网其他相关文章！