Flex布局

一、原理

通过父盒子添加flex属性，从而控制子盒子横纵的排列

二、父属性

（1）flex-direction

设置主轴的方向

• row ：默认值，设置x轴为主轴。
• column ：设置y轴为主轴，而x为侧轴。

（2）justify-content

设置主轴上子元素的排列方式

• flex-start：默认值，从左往右排列
• center：居中对齐。
• space-between：先将两边的元素进行贴合，再平分剩余空间。
• flex-end：从右往左排列，顺序会调转
• space-around：直接平分剩余空间。

（3）align-items

设置侧轴上的子元素排列（单行）

• center：居中
• stretch：拉伸

（4）align-content

设置侧轴对齐方式（多行）

• flex-start：默认值，让子元素从上到下排列。
• center：居中
• space-around：直接平分剩余空间。
• space-between：先将两边的元素进行贴合，再平分剩余空间。
• flex-end：让子元素从下到上排列，顺序会颠倒。

（5）flex-wrap

设置子元素是否换行

• nowrap：默认值，若子元素放不下将会自动调节子元素的宽度。
• wrap：设置子元素为换行。

三、子属性

（1）flex属性

定义子项目分配剩余空间的所占的份数。

• number：值为整数。

比如：当一个子元素定宽时，另外一个子元素flex:1;则会将剩余空间全部沾满。

（2）align-self

控制自身在侧轴的排列方式

• auto：默认值，随着父项目所设置的属性排列。
• center：元素位于容器的中心。
• flex-start：元素位于容器的开头。
• flex-end ：元素位于容器的结尾。

（3）order

定义自身排列顺序

• 0，默认值
• 负数：排0前面，越小越靠前
• 正数：排0后面，越大越靠后