本文介绍如何利用 display: flex 与 flex-wrap: wrap 实现固定尺寸子元素的自适应行列布局，无需 JavaScript 或媒体查询即可根据容器宽度动态切换列数与行数。
本文介绍如何利用 `display: flex` 与 `flex-wrap: wrap` 实现固定尺寸子元素的自适应行列布局，无需 javascript 或媒体查询即可根据容器宽度动态切换列数与行数。
在构建响应式网格布局时，一个常见需求是：子项尺寸严格固定（如 500px × 100px），不随视口缩放；但整体排列方式需根据容器可用宽度自动调整为多列多行组合（例如宽屏下 3 列 × 2 行，窄屏下自动变为 2 列 × 3 行或 1 列 × 6 行）。此时，Flexbox 是比传统浮动或表格更简洁、语义更清晰的解决方案。
核心原理在于 flex-wrap: wrap —— 它允许 Flex 容器在主轴（默认为水平方向）空间不足时，将溢出的子项自动换行至新行，从而形成“弹性行数”，而列数则由每行能容纳多少个固定宽度子项自然决定。
以下为完整可运行示例：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div>
.box {
width: 500px;
height: 100px;
box-sizing: border-box;
border: 1px solid #28a745;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 推荐添加间隙，替代 margin，更可控 */
padding: 12px;
max-width: 1500px;
margin: 0 auto;
}
✅ 关键要点说明：
- .container 必须设置 display: flex + flex-wrap: wrap，这是实现自动换行的基础；
- 所有 .box 使用固定宽高（如本例 width: 500px），不设 flex-grow/flex-shrink，确保尺寸绝对稳定；
- 使用 gap 替代子项 margin 控制间距，避免因 margin 折叠或计算偏差影响换行判断；
- 可选：为 .container 设置 max-width 和 margin: 0 auto 实现居中约束，提升视觉一致性；
- ❗ 注意：不要给 .box 设置 flex: 1 或 flex-basis: auto，否则会破坏固定尺寸逻辑。
该方案完全基于 CSS 布局流，轻量、高性能、无障碍友好，且天然支持 RTL（从右向左）布局。若后续需增强控制（如指定最小列数、等高行、对齐方式），可进一步结合 justify-content（如 space-between）、align-content（控制多行对齐）等属性扩展。
总结：用 Flexbox 实现“固定尺寸 + 自动行列适配”，本质是让容器成为智能换行器——你只定义子项大小和容器弹性行为，浏览器自动完成布局决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
