答案：通过align-items和justify-content控制Flex布局中子元素在交叉轴与主轴的对齐方式，结合flex-direction确定轴方向，实现如居中、两端对齐等常见布局效果。
在CSS布局中，子元素的对齐方式直接影响页面的视觉效果和用户体验。通过 align-items 和 justify-content 这两个Flexbox中的核心属性，我们可以灵活控制容器内子元素在主轴与交叉轴上的排列位置。下面结合实际场景讲解它们的用法和常见搭配。
理解主轴与交叉轴
使用Flex布局时，首先要明确主轴（main axis）和交叉轴（cross axis）的方向，这由 flex-direction 决定：
- 当 flex-direction: row（默认值），主轴为水平方向，交叉轴为垂直方向
- 当 flex-direction: column，主轴为垂直方向，交叉轴为水平方向
justify-content 控制主轴上的对齐，align-items 控制交叉轴上的对齐。
justify-content：主轴对齐方式
该属性用于设置子元素在主轴方向上的分布方式，常见取值包括：
立即学习“前端免费学习笔记（深入）”；
- flex-start：元素向主轴起点对齐
- flex-end：元素向主轴终点对齐
- center：元素居中对齐
- space-between：两端对齐，元素间间距相等
- space-around：每个元素周围有相等空间
- space-evenly：所有元素间的间距完全相等
例如，实现导航栏两端对齐、中间内容均匀分布：
nav {
display: flex;
justify-content: space-between;
}
align-items：交叉轴对齐方式
该属性定义子元素在交叉轴上的对齐方式，常用值有：
- flex-start：元素向交叉轴起点对齐
- flex-end：元素向交叉轴终点对齐
- center：元素在交叉轴上居中
- baseline：元素基线对齐，适合文本类布局
- stretch：元素拉伸填满容器（默认值，前提是子元素未设置固定高度）
比如让图标和文字在按钮中垂直居中：
.btn {
display: flex;
align-items: center;
height: 40px;
}
实战组合技巧
将两个属性结合使用，可以快速实现常见的布局需求：
- 水平垂直居中：justify-content: center; align-items: center;
- 顶部左对齐：justify-content: flex-start; align-items: flex-start;
- 底部右对齐：justify-content: flex-end; align-items: flex-end;
- 垂直居中、水平分散：justify-content: space-around; align-items: center;
卡片列表中标题与按钮上下对齐：
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 200px;
}
.card-title { margin-bottom: 10px; }
.card-btn { align-self: flex-end; }
基本上就这些。掌握 align-items 和 justify-content 的作用方向与常用值，再结合具体场景调整，就能高效完成大多数对齐需求。不复杂但容易忽略的是轴方向的变化带来的影响，写样式时记得先确认 flex-direction 的设置。
