问题：
在具有两列的 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中文网其他相关文章！
