3分钟精通flex布局 - flex布局可视化学习工具

其实很多人迷惑的是justify-content和align-items的关系，很多人误认为align-items是设置垂直方向的布局，这么理解其实是有问题的。

这里要搞清楚一个概念，主轴和交叉轴。

• justify-content 用来设置主轴方向的布局或对齐方式

• align-items 用来设置交叉轴方向的布局或对齐方式

主轴可以通过flex-direction来进行设置，取值为row和column。

当为row时，justify-content 控制水平方向的布局，align-items 控制垂直方向的布局。

当为column时，justify-content 控制垂直方向的布局，align-items 控制水平方向的布局。

截图演示下

flex-direction:row,justify-content:space-around,align-items:center

---

flex-direction:column,justify-content:space-around,align-items:center

---