寻求兼具flex row wrap与垂直flex-shrink特性的纯CSS布局方案

核心代码实现 #

HTML结构

<div class="container">
  <div class="row">
    <div class="tube" style="height: 40px;">Tube 1</div>
    <div class="tube" style="height: 60px;">Tube 2</div>
    <div class="tube" style="height: 50px;">Tube 3</div>
    <!-- 按需添加更多Tube元素 -->
  </div>
  <div class="row">
    <div class="tube" style="height: 70px;">Tube 4</div>
    <div class="tube" style="height: 30px;">Tube 5</div>
    <!-- 按需添加更多Tube元素 -->
  </div>
  <!-- 按需添加更多行 -->
</div>

CSS样式

.container {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 可选：行之间的间距，可根据需求调整 */
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 可选：元素之间的间距，可根据需求调整 */
  flex: 1 1 auto; /* 关键属性：允许行在垂直方向等比例收缩 */
  align-items: stretch; /* 自动适配该行最高元素的高度 */
}

.tube {
  width: min(30px, 20vw);
  flex: 0 0 min(30px, 20vw); /* 固定元素宽度，不自动拉伸 */
  /* 可选基础样式 */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

方案适配说明 #

1. 宽度控制与自动换行
   .tube元素通过width: min(30px, 20vw)确保宽度始终取30px和20vw中的较小值；每个.row作为水平flex容器，启用flex-wrap: wrap，当元素总宽度超过行宽时自动换行，完全匹配7-16个元素的布局需求。

2. 行高适配与静态高度支持
   .row的align-items: stretch属性会强制该行内所有.tube元素高度拉伸至与该行最高元素一致；同时每个.tube可通过内联样式或自定义类指定任意静态高度，各行高度由自身内容决定，无需统一。

3. 垂直等比收缩
   外层.container设置max-height: 90vh限制整体高度，同时作为垂直flex容器；每个.row的flex: 1 1 auto属性确保当容器总高度超出90vh时，所有行按自身原始高度比例等比收缩，实现类似垂直方向flex-shrink:1的效果。

可选调整 #

• 若希望Tube元素在换行时填充行内剩余宽度，可将.tube的flex属性改为1 0 min(30px, 20vw)，此时元素宽度不会小于最小值，但会自动拉伸填满行宽。
• 不需要间距时，直接移除.container和.row中的gap属性即可。

内容的提问来源于stack exchange，提问作者Tadhg McDonald-Jensen