该属性用于设置Flex元素水平方向的位置。
<div style="width:300px; height:200px; display: flex; flex-direction: column;">
<!-- justify-content:center; | 水平居中 -->
<!-- ps: 对齐或者空间分割之前，记得把容器设置成 Flex盒子 -->
<div style="background: red; flex-grow:1; display:flex; justify-content:center;">头部</div>
<div style="background: green; flex-grow:3; ">内容</div>
<div style="background: blue; flex-grow:1; ">尾部</div>
</div>显示效果
justify-content 水平对齐的一些属性值。
| 属性 | 含义 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中对齐 |
| space-between | 水平均分（一） |
| space-around | 水平均分（二） |