Flex容器通过justify-content和align-items控制子元素在主轴与交叉轴的整体对齐，而子元素可使用align-self或margin:auto进行独立调整。例如导航栏居中显示时，登录按钮通过margin-left:auto靠右。结合两者可实现复杂且灵活的布局效果，如垂直居中、卡片内元素错位排列等，兼顾统一性与特殊需求。
在使用 CSS Flexbox 布局时，容器对齐和子元素对齐是两个核心概念。它们共同决定了 Flex 容器内子元素的排列方式和位置。合理结合使用容器属性和子元素属性，可以实现灵活且精准的布局效果。
Flex 容器对齐：控制主轴与交叉轴上的整体分布
通过设置 Flex 容器的属性，可以控制所有子元素在主轴（horizontal）和交叉轴（vertical）上的对齐方式。
常用容器属性：
- justify-content：定义子元素在主轴上的对齐方式，如 flex-start、center、space-between 等。
- align-items：定义子元素在交叉轴上的对齐方式，如 stretch、center、flex-start。
- align-content：多行 Flex 容器中，控制行与行之间的对齐（仅在换行时有效）。
子元素对齐：单个元素的独立调整
虽然容器设置了统一的对齐规则，但个别子元素可以通过自身属性进行微调。
立即学习“前端免费学习笔记（深入）”；
关键子元素属性：
- align-self：覆盖 align-items 的设置，让某个子元素在交叉轴上有不同的对齐方式。例如一个元素设为 align-self: flex-end;，而其他保持居中。
- margin 自动值：在 Flex 子元素上使用 margin: auto; 可以实现局部对齐，比如将某个元素推到一侧或完全居中，不受 justify-content 限制。
结合使用示例：创建复杂但清晰的布局
假设有一个导航栏，大部分菜单项居中显示，但右侧有一个“登录”按钮需要靠右对齐。
.container {
display: flex;
justify-content: center; /* 所有子项默认居中 */
align-items: center;
}
.login-btn {
margin-left: auto; / 将登录按钮推到最右边 /
}
这个例子中，容器用 justify-content: center 居中内容，但通过给特定子元素设置 margin-left: auto，实现了局部右对齐，无需额外结构。
实际应用中的常见组合
- 垂直居中文字与图标：align-items: center 让所有子元素垂直居中，适合工具栏或按钮组。
- 卡片布局中标题靠上、按钮靠下：使用 align-self: flex-end 控制按钮位置。
- 等间距分布加突出项：用 justify-content: space-around 分布常规项，再用 margin 调整特殊项。
基本上就这些。掌握容器与子元素对齐的配合，能让你用 Flexbox 更高效地完成各种布局需求，既保持整体一致性，又不失灵活性。
