如何使用flexbox实现无需预定义行列的动态表格布局适配媒体画廊

可以通过Flex实现无需预定义行列的媒体画廊布局，你当前代码的问题在于.item设置了flex: auto，该属性允许元素自动填充行内剩余空间，当最后一行元素数量不足时，元素会被拉伸至填满整行，和预期效果不符。

修正后代码 #

CSS部分 #

.container {
  width: 100%;
  min-height: 100vh;
  background-color: rosybrown;
  display: flex;
  flex-wrap: wrap;
  /* 统一控制行列间距，无需单独给item加margin */
  gap: 2%;
  row-gap: 16px;
}

.item {
  background: red;
  /* 0表示不放大、0表示不缩小，基础宽度固定为49%，刚好一行放2个 */
  flex: 0 0 49%;
  box-sizing: border-box;
  /* 可选：固定容器比例，适配图片/视频展示 */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML部分 #

和你原有代码一致即可：

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

布局扩展说明 #

如果你需要完全自适应列数（根据容器宽度自动调整每行元素数量，完全不需要预定义行列），可以将.item的flex属性修改为：

.item {
  /* 最小宽度300px，能放几个就放几个，自动换行 */
  flex: 1 0 300px;
  max-width: 49%; /* 可选：限制最多一行2个 */
}

修改300px的数值即可调整自适应的触发阈值，适配不同尺寸的媒体资源。

内容的提问来源于stack exchange，提问作者Vlad