如何让 Flexbox 儿童利用可用空间来划分不同的高度？

确保 Flexbox 子项利用可用空间实现独立高度

问题：

在具有两列的 Flexbox 布局中，如何不同尺寸的元素是否可以分布以填充整个可访问区域，而不是与最高的元素具有相同的高度element?

上下文：

使用flexbox的flex-wrap属性，我们可以将元素包装到多行上。但是，默认情况下，行中的所有元素往往与该行中最高的元素具有相同的高度。如果我们希望元素保持其自然高度，这可能是不可取的。

示例：

考虑以下代码：

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

.cell {
  width: 300px;
  flex: 1 auto;
}

答案：

Flexbox 继承自设计行的行为如上所述。 Flexbox 并不打算模仿 Masonry 风格的布局，其中行元素可以扩展到相邻行的空间。使用align-items调整元素高度的选项有限：

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

作为替代方案，请考虑使用列方向或探索多列模块以获取更多自定义选项。

以上是如何让 Flexbox 儿童利用可用空间来划分不同的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！