html5中flex布局实现两端对齐用justify-content: space-between（子项不设flex/width），等宽分配则子项统一设flex: 1与min-width: 0；组合使用时仅需等宽设置，无需space-between，间隙用gap控制。
在 HTML5 中用 Flex 布局实现“两端对齐”和“子元素等宽分配”，关键在于区分两种不同需求：前者指首尾项目贴边、中间间距均等（如导航栏）；后者指所有子项严格占据相等宽度（如三栏卡片）。两者可单独使用，也能组合——但属性搭配稍有差异，容易混淆。
两端对齐（首尾贴边 + 间隙均分）
适用于导航菜单、按钮组等场景，核心是控制主轴对齐方式，不改变子项自身宽度。
- 父容器设 display: flex，确认主轴方向为 flex-direction: row（默认）
- 使用 justify-content: space-between：第一项靠左、最后一项靠右，其余项均匀分布在中间
- 注意：子元素不能设置 flex: 1 或固定 width，否则会覆盖 space-between 的间距逻辑
- 若只有两个子项，space-between 效果就是真正的“两端对齐”；三个及以上时，是“首尾贴边、中间等距”
子元素严格等宽分配
目标是每个子项占容器总宽的 1/n（如三等分就各占约 33.33%），不受内容长短影响。
- 父容器设 display: flex
- 每个子项统一设置 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%）
- 必须加 min-width: 0 到每个子项：防止长文本、URL 等内容阻止收缩，这是等宽失效最常见的原因
- 若子项内含文字需截断，建议同步加 overflow: hidden; white-space: nowrap; text-overflow: ellipsis
两端对齐 + 等宽子项（进阶组合）
例如：三个按钮，各自等宽，且整体贴满容器——此时不是 space-between，而是让每个子项“自己撑满三分之一”，再靠 flex 自动对齐。
- 父容器仍为 display: flex
- 子项用 flex: 1 + min-width: 0 实现等宽
- 无需 justify-content；因为等宽后自然首尾贴边，视觉上就是“两端对齐”
- 如需子项间留空隙，优先用 gap: 12px（现代标准，不破坏 flex 计算），而非 margin
避坑提醒
几个高频出错点：
- flex: 1 不生效？ 检查子项是否误设了 width / max-width / min-width（尤其 width: 100% 会锁死）
- 文字太长导致某项变宽？ 99% 是漏了 min-width: 0
- 垂直方向也要等高？ 父容器加 align-items: stretch（默认值，通常不用写）
- 换行后等宽失效？ flex-wrap: wrap 时，flex: 1 只在单行内生效；多行等宽需配合 flex-basis: calc(33.33% - gap) 手动计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
