弹性布局水平居中上下分布

vmbs.png

朋友们是否都想用flex语法，来达到这种居中的上下分布效果呢？
下面请跟着我走(●'◡'●)

1. 转换主轴

flex-direction: column;

不仅是将盒子上下排列，而是将父盒子的主（x）轴换到垂直方向。

fdc.png

2. 次轴居中

align-items: center;

在次（y）轴上居中。

aic.png

3. 主轴两边分布

justify-content: space-between;

vmbs.png

最终让盒子在父盒子的主轴上两边分布

完整代码

display: flex;
flex-direction: column;
align-items: center;
justify-conent: space-between;

---

关注我，日更1个教程里没有的前端小知识点。
动动你发财的小手，给拎包哥点个赞吧！