通过 Flexbox 的 flex-wrap: wrap 配合固定宽高的子元素，可让容器内方块自动按视口宽度调整行列数，无需 JavaScript 或媒体查询干预，子项尺寸保持恒定。
通过 flexbox 的 `flex-wrap: wrap` 配合固定宽高的子元素，可让容器内方块自动按视口宽度调整行列数，无需 javascript 或媒体查询干预，子项尺寸保持恒定。
在构建响应式卡片、图标网格或信息模块时，常需实现「子项尺寸固定、容器内自动重排行列」的效果——例如：宽屏下显示 3 列 × 2 行，窄屏下自动变为 2 列 × 3 行，甚至单列多行。关键在于不依赖媒体查询控制列数，而是让布局引擎根据可用空间自然折行。
Flexbox 正是为此类场景而生的理想方案。核心思路是：
✅ 将容器设为 display: flex 并启用 flex-wrap: wrap；
✅ 所有子项设置明确且一致的 width 和 height（如 width: 300px; height: 120px）；
✅ 容器本身不设固定高度，仅限制最大宽度（如 max-width: 1500px）并居中（可选加 margin: 0 auto）；
❌ 不使用 flex: 1、flex-grow 或 flex-basis 动态伸缩值，确保子项尺寸绝对稳定。
以下为完整可运行示例：
<style>
.box {
width: 300px;
height: 120px;
box-sizing: border-box;
border: 1px solid #4a5568;
background-color: #f7fafc;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #2d3748;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 推荐使用 gap 替代 margin，更可控 */
max-width: 1500px;
margin: 0 auto;
padding: 20px;
}
</style><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>
? 关键说明与最佳实践：
- gap 属性（推荐 ≥ Chrome 84 / Firefox 63+）比手动设置 margin 更简洁安全，避免外边距合并问题；若需兼容旧浏览器，可用 margin + :nth-child 清除末尾多余间距。
- 子项切勿设置 flex: 1 或 width: 100%，否则会破坏固定尺寸逻辑；所有尺寸应显式声明。
- 若需等高对齐（如文字垂直居中），align-items: center 已足够；若内容高度不一，建议统一 min-height 而非依赖 align-items: stretch。
- 此方案天然支持任意数量子项，新增 7后，布局将自动适应——这是表格或 CSS Grid（未配合 auto-fit）难以简洁实现的灵活性。
总结：flex-wrap: wrap 是实现“固定尺寸、弹性换行”布局的轻量级银弹。它语义清晰、兼容性好（IE10+）、代码极少，且完全符合现代 CSS 布局设计哲学——让容器管理流式行为，让子项专注自身表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
