flex布局

父容器中写入

.contain{display:flex;}      设定为flex布局

 

align-items: center                     为垂直方向对齐方式

justify-content:flex-start              为水平方向对齐方式

align-content：flex-start；         当子容器多行排列时，设置行与行之间的对齐方式。

flex: 1; flex: 2; flex: 3;                 为各子项的伸缩比例。 Flex数值越大伸缩比例越大。

align-self：flex-start                   为子项的垂直对齐方式

flex-direction: row                      为轴的方向 有向右 向左  向上 向下

flex-wrap：wrap 换行

flex-grow: 1                                为子项的放大比例   放大比例  默认是0   当有放大空间的时候，值越大，放大的比例越大

flex-shrink:                                  为子项的放大比例 缩小比例  默认是1  值越大，缩小的时候比例越小；