Flexbox对齐核心在于主轴与交叉轴控制。容器通过justify-content设置子元素主轴对齐，align-items定义交叉轴对齐，多行时align-content控制行间分布；子元素可用align-self单独调整交叉轴对齐，或用margin:auto实现自动居中等效果。常用场景如水平垂直居中（justify-content:center;align-items:center）、等间距布局（space-between/space-evenly）、底部对齐（flex-end）及多行居中（align-content:center）等，关键在于理解轴线方向与换行影响。
在使用 CSS Flexbox 布局时，对齐方式是控制容器和子元素排列的关键部分。通过合理设置容器（flex container）和子元素（flex items）的对齐属性，可以轻松实现各种布局效果。
Flex 容器上的对齐属性
这些属性应用于设置了 display: flex 或 display: inline-flex 的父容器上，用来控制子元素在主轴和交叉轴上的对齐方式。
1. justify-content定义子元素在主轴（main axis）上的对齐方式，适用于行或列方向，取决于 flex-direction 的值。
- flex-start：向主轴起点对齐（默认）
- flex-end：向主轴终点对齐
- center：居中对齐
- space-between：两端对齐，项目间间距相等
- space-around：每个项目两侧间距相等，视觉间隔不均
- space-evenly：项目间及与容器边缘的间距完全相等
定义子元素在交叉轴（cross axis）上的对齐方式，类似于垂直方向对齐（当主轴为水平时）。
立即学习“前端免费学习笔记（深入）”；
- stretch：拉伸填满容器（默认，前提是子元素无固定高度）
- flex-start：向交叉轴起点对齐
- flex-end：向交叉轴终点对齐
- center：交叉轴居中对齐
- baseline：按文本基线对齐，适合文字类布局
当容器有多根弹性行（即启用了换行 flex-wrap: wrap 且项目超出一行）时，该属性控制行与行之间在交叉轴上的对齐方式。
- stretch：各行平均分布容器空间（默认）
- flex-start：所有行向交叉轴起点堆叠
- flex-end：向终点堆叠
- center：居中排列
- space-between：行间均匀分布，首尾行贴边
- space-around：每行上下有相等空间
注意：如果只有一行，align-content 不起作用。
Flex 子元素上的对齐属性
这些属性写在子元素上，用于覆盖容器的默认对齐行为，实现更精细的控制。
1. align-self允许单个子元素在交叉轴上拥有与其他元素不同的对齐方式。可覆盖 align-items 的设定。
- 取值与 align-items 相同：auto, flex-start, flex-end, center, baseline, stretch
- 例如：
align-self: center;可让某个元素单独垂直居中
在 Flex 布局中，使用 margin: auto 可以实现特殊对齐效果。
-
margin-right: auto;可将元素推到左侧，右侧留白 -
margin: auto;在某个方向上会吸收剩余空间，实现自动对齐 - 例如：一个子元素设置
margin: auto;会相对于容器在两个轴上都居中
常见对齐场景示例
以下是一些实用布局的组合写法：
-
水平垂直居中一个元素：
容器设置justify-content: center; align-items: center; -
底部对齐卡片内容：
容器设align-items: flex-end;或子元素设align-self: flex-end; -
等间距导航栏：
用justify-content: space-between;或space-evenly; -
多行内容居中堆叠：
配合flex-wrap: wrap;和align-content: center;
基本上就这些。掌握这几个对齐属性，就能应对大多数 Flexbox 布局需求，关键是理解主轴与交叉轴的关系，并根据是否换行选择合适的属性。不复杂但容易忽略细节。
