Flex布局是解决列表排版问题最直接可控的方式：通过display:flex启动弹性容器，用justify-content控制主轴对齐，align-items控制交叉轴对齐，flex-wrap和align-content处理多行布局，并推荐使用gap统一设置间距。
列表页面排版不好看，核心问题往往不是内容本身，而是容器和子项的对齐逻辑没理清。Flex 布局正是解决这类问题最直接、可控的方式——不用浮动、不依赖固定宽高，靠几个关键属性就能让列表横平竖直、间距均匀、响应自然。
用 display: flex 启动弹性容器
先确保列表容器（比如 ul 或 div 包裹的 item 组）设为 flex：
- 给父容器加 display: flex，它就变成弹性上下文，子项自动成为 flex item
- 默认是 flex-direction: row（横向排列），适合导航栏、标签栏等；列表项垂直堆叠时，改用 flex-direction: column
- 避免在 flex 容器上同时使用 float、inline-block 或 vertical-align，它们会失效或引发意外行为
控制主轴对齐：justify-content
这个属性管的是“一行内”子项沿主轴（横/纵）的分布方式：
- justify-content: flex-start（默认）：左对齐 / 顶对齐
- justify-content: center：居中（常用于卡片列表、按钮组）
- justify-content: space-between：首尾贴边，中间等距（适合导航菜单、工具栏）
- justify-content: space-evenly：所有间隙（含首尾外侧）完全相等，视觉更平衡
控制交叉轴对齐：align-items
这个属性决定子项在“垂直于主轴”的方向上如何对齐（比如主轴是 row 时，它管上下对齐）：
立即学习“前端免费学习笔记（深入）”；
- align-items: stretch（默认）：子项拉满容器高度，适合统一高度的卡片或按钮
- align-items: center：垂直居中（文字+图标混合列表常用）
- align-items: flex-start：顶部对齐（适合多行文本高度不一的新闻列表）
- 如果希望每项自己控制交叉轴位置，可在子项上用 align-self 单独覆盖
让换行和多行列表也整齐：flex-wrap 和 align-content
当子项总宽超过容器，或设置为 column 且内容多时，需要换行处理：
- 加 flex-wrap: wrap 允许子项折行（row 下换行，column 下换列）
- 换行后，多行之间的间距由 align-content 控制（如 space-between、center）
- 注意：align-content 只在有多行/多列时生效，单行下无效
- 配合 gap 属性（推荐！）统一设置行与列间距，比 margin 更干净，不触发 margin 合并问题
