flex布局

flex布局

一、flex布局父亲常见属性：

1、flex-direction:设置主轴方向

1、主轴和侧轴：
默认主轴为x轴，侧轴为有轴，
（1）、默认为：row（从左到右）
（2）、方向x轴：row-reverse（从右到左）
（3）、把主轴变成y轴，那么x轴为侧轴：column（从上到下）
（4）、把主轴变成y轴，那么x轴为侧轴：column-reverse（从下到上）

2、justify-content:设置主轴上的子元素的排列方式

设置这个属性的时候一定要确认好主轴到底是哪个！！！

（1）、flex-start:默认值，从头部开始，如果主轴是x轴，则从左到右
（2）、flex-end：从尾部开始排列
（3）、center:在主轴居中对齐（如果主轴为x轴则水平居中）
（4）、space-around :平均剩余空间
（5）、space-between:先两边贴边，在平分剩余空间（重要）

3、flex-wrap:设置子元素是否换行

在felx里面我们盒子变多了，felx会把子元素都在一行显示，我们就会把父盒子变大。
在felx布局中，我们是默认不换行的！！！
（1）、nowrap：不换行（默认）
（2）、wrap:换行

4、align-content:设置侧轴上子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下没有效果。
（1）、flex-start：默认值在侧轴的头部开始排列
（2）、flex-end：在侧轴的尾部开始排列
（3）、center：在侧轴中间显示
（4）、space-around：子项在侧轴平分剩余空间
（5）、space-between：子项在侧轴先分布在两头，在平分剩余空间
（6）、stretch：设置子项元素高度平分父元素高度

5、align-items:设置侧轴上子元素的排列方式（单行）

这个属性我们一点要先确认好侧轴！！！
（1）、flex-start:默认值 从上到下
（2）、flex-end：从下到上
（3）、center:挤在一起居中（垂直居中）
（4）、stretch：拉伸（主要设置这个属性是我们的盒子不要设置高度，不然看不出效果）

6、flex-folw:符合属性，相当于同时设置了flex-direction和flex-wrap

row wrap;
就是同时设置了flex-direction和flex-wrap!!!属性自己上去上面看！！！

二、子项常见属性

使用方法：

左右2侧固定，中间自适应。

平居分为3等分

1、align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
控制某一个子项：

2、order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.
注意：和z-index不一样。