flex-wrap用于控制子项是否换行及换行堆叠方向：nowrap（默认，不换行）、wrap（按主轴方向顺向堆叠）、wrap-reverse（反向堆叠）；它不改变主轴方向，需配合flex-direction理解实际换行效果。

flex-wrap 用于控制 Flex 容器内的子项在空间不足时是否换行，以及换行的方向。它不改变主轴方向（由 flex-direction 决定），只决定“要不要折行”和“折行后各行怎么堆叠”。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

flex-wrap 的三个可选值

• nowrap（默认）：所有子项强制保持在一行，即使溢出容器也不换行；
• wrap：允许换行，新行按主轴方向依次向下（flex-direction: row）或向右（row-reverse）堆叠；
• wrap-reverse：允许换行，但新行反向堆叠——例如主轴为 row 时，新行向上排列（即第一行在最下方）。

配合 flex-direction 理解换行方向

换行方向取决于主轴：

• 主轴是 row 或 row-reverse → 换行表现为“从上到下”或“从下到上”的行堆叠；
• 主轴是 column 或 column-reverse → 换行表现为“从左到右”或“从右到左”的列堆叠（此时“行”其实是水平方向的一列）。

举例：设 flex-direction: column; flex-wrap: wrap;，子项会先填满容器高度，超出后向右新增一列。

实际使用建议

• 多数响应式布局用 flex-wrap: wrap 配合 flex-direction: row，让项目自动折成多行；
• 避免仅靠 flex-wrap 解决溢出问题，应结合 flex-basis、min-width 或媒体查询控制单个项目尺寸；
• wrap-reverse 较少用，适合特定 UI 场景（如倒序时间线、底部固定工具栏上方动态插入内容）。

它本身不设置间距，如需行间/列间空隙，需配合 gap 属性（推荐）或 margin 手动处理。