- Objective:
- Breadcrumb:
# 概念阐释
- 决定**cross-axis交差轴上**， item移动的位置
- 移动时与`flex-direction` 轴向垂直
- 当主轴方向为`row` `row-reverse`时，item上下移动
- 当主轴方向为` column` `column-reverse`时，上下移动
## 语法
```css
.container {
flex-direcetion: row row-reverse column column-reverse;
align-items: value;//交差轴上方向移动
}
/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;
```
# 实例
# 相关内容
# 参考资料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items