flex布局

原文链接：https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。

一、父容器设置：

1、justify-content（横向）

flex-start：起始端对齐、

flex-end：末尾段对齐、

center：居中对齐、

space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

2、align-items（垂直）

flex-start：起始端对齐、

flex-end：末尾段对齐、

center：居中对齐、

baseline：基线对齐，这里的 baseline 默认是指首行文字，即 first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。

stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

3、设置换行方式：flex-wrap

nowrap：不换行

wrap：换行

wrap-reverse：逆序换行（逆序换行是指沿着交叉轴的反方向换行。）

4、flex-direction：主轴方向

向右：flex-direction: row   （子容器设置所占等分：flex:1/flex:2）

向下：flex-direction: column （子容器设置所占等分：flex:1)

 

向左：flex-direction: row-reverse

向上：flex-direction: column-reverse

 

二、子容器设置：（align-self）

flex-start：起始端对齐、

flex-end：末尾段对齐

center：居中对齐

baseline：基线对齐

stretch：拉伸对齐