css如何用Flexbox布局实现网格_通过flex-wrap配合调整网格布局

flex-wrap 是实现多行 flex 网格的关键开关，必须设为 wrap 才能换行；每行数量由子项 flex-basis 与容器宽度共同决定；justify-content 控制单行内主轴对齐，align-content 才控制多行间交叉轴对齐。

flex-wrap 是网格布局的关键开关

单纯用 display: flex 只能排一行，要实现多行网格（比如 3×3、4×2），必须开 flex-wrap: wrap。关着它，子项哪怕溢出容器也不会换行——这是最常被忽略的第一步。

注意：父容器需有明确宽度（或 max-width），否则子项可能全挤在一行里撑宽容器，看起来像没换行。

• flex-wrap: wrap —— 换行，新行从主轴起点开始（默认左对齐）
• flex-wrap: wrap-reverse —— 换行，但新行堆在上一行“下方”（对 row 主轴来说，是从下往上叠）
• flex-wrap: nowrap（默认）—— 死也不换行，慎用

控制每行数量靠子项的 flex-basis + 容器宽度

Flex 网格没有“列数”属性，行内能塞几个，取决于每个子项的最小宽度（flex-basis）和父容器总宽。例如想实现 4 列，可设 flex-basis: 25%；3 列就用 flex-basis: 33.333%。

但百分比会受 gap 影响：如果加了 gap: 1rem，实际可用宽度变小，25% 可能刚好卡不住 4 个，导致最后一项掉到下一行。这时要么调小 flex-basis（比如 23%），要么用 calc() 精算：

立即学习“前端免费学习笔记（深入）”；

flex-basis: calc((100% - 3 * 1rem) / 4);

（3 * 1rem 是 4 项之间的 3 个 gap）

对齐问题：justify-content 和 align-content 要分清作用对象

justify-content 控制「单行内」子项的主轴对齐（如 space-between 让首尾贴边、中间等距）；而 align-content 才管「多行之间」的交叉轴对齐（比如让两行网格在容器里上下居中）。

常见误区：给多行 flex 容器设 justify-content: center，发现没效果——因为那只是把每行内部居中了，行与行之间还是顶着顶部。真要整体居中，得配 align-content: center，且前提是容器高度足够、有剩余空间。

• align-content: flex-start（默认）→ 所有行堆在顶部
• align-content: center → 行组在容器交叉轴居中
• align-content: space-between → 首行顶、末行底，中间行等距

响应式网格靠媒体查询重设 flex-basis

移动设备上 4 列太挤？别写死像素值，用媒体查询动态改 flex-basis：

@media (max-width: 768px) {   .grid {     flex-wrap: wrap;   }   .grid > * {     flex-basis: 50%;   } } @media (max-width: 480px) {   .grid > * {     flex-basis: 100%;   } }

注意：不要只改容器的 flex-direction（比如切 column），那样会破坏自然文档流顺序，对语义和可访问性不友好。用 flex-basis + wrap 更稳妥。

真正难的不是写出来，而是当内容高度不一致时，如何让整行“等高”——这得靠 align-items: stretch（默认值），但前提是子项没设 height 或 min-height 覆盖它。