如何让Flexbox子项在保持原有高度的同时占据全部可用空间？

Flexbox：实现可变高度子项以充分利用可用空间

Flexbox 是一个功能强大的布局模块，使 Web 开发人员能够创建响应式和灵活的布局。一个常见的用例是创建两列布局，其中每列包含高度不同的子元素。但是，默认情况下，一行中的所有子项都将具有最高子项的高度。

问题：

如何将两列 Flexbox 布局配置为允许不同大小的孩子充分利用可用空间，而不是让所有孩子都具有行中最高孩子的高度？

解决方案：

Flexbox 本身并不存在允许行占用为前行或后行分配的空间。因此，仅 CSS 无法重新创建类似 Masonry 的行为，其中一行中的项目可以拉伸以填充可用空间。

实现：

使用align-items 属性设置为 flex-start 可以防止孩子拉伸，确保他们保持原来的高度：

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

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

这个解决方案可以确保每个单元格保持原来的高度，防止最高的孩子将其高度强加于整个单元格row.

替代方法：

或者，考虑使用列方向或多列模块来创建具有可变高度列的布局。这种方法允许列中的项目占据该列的整个高度，从而达到预期的效果。

以上是如何让Flexbox子项在保持原有高度的同时占据全部可用空间？的详细内容。更多信息请关注PHP中文网其他相关文章！