该属性用于设置Flex元素垂直方向的位置。
<div style="width:300px; height:200px; display: flex; flex-direction: column;">
<!-- align-items:center | 垂直居中 -->
<!-- ps: 对齐或者空间分割之前，记得把容器设置成 Flex盒子 -->
<!-- ps: 水平居中 & 垂直居中 可以同时设置 -->
<div style="background: red; flex-grow:1; display:flex; align-items:center;">头部</div>
<div style="background: green; flex-grow:3; ">内容</div>
<div style="background: blue; flex-grow:1; ">尾部</div>
</div>显示效果
align-items 垂直对齐的一些属性值。
| 属性 | 含义 |
|---|---|
| flex-start | 默认值，上对齐 |
| flex-end | 下对齐 |
| center | 居中对齐 |
| baseline | 其他对齐（一） |
| stretch | 其他对齐（二） |