flex布局

补充

1. 设置flex布局后float|claer|vertical-align属性将失效

2. 父级对齐方式：justify-content|align-items

3. flex属性会将剩余的空间分配出去

父级属性

排列方向

flex-direction:row;默认是从左往右排版
flex-direction:row-reverse;从右至左
flex-direction:column;从上至下排版    属性设置后：主轴会变为侧轴
flex-direction:column-reverse;从下至上排版    属性设置后：主轴会变为侧轴

水平对齐

注：justify-content是设置主轴上的对齐方式，默认是（row）

justify-content:flex-start;默认
justify-content:flex-end;伸缩项对齐尾部
justify-content:center;水平居中对齐
justify-content：space-between;贴边分配剩余空间
justify-content：space-around;均分剩余空间

垂直对齐

align-items:flex-start;默认
align-items:flex-end;对齐尾部
align-items:center;垂直居中对齐
align-items:baseline;基线对齐
align-items：stretch;(拉伸对齐，等高对齐)     注：不能设高度，否则无效
注：align-items会控制所有伸缩项垂直对齐方式

换行

注：默认不换行

flex-wrap:nowrap;默认不换行
flex-wrap:wrap;超出后换行
flex-wrap:wrap-reverse;超出换行后反转

换行后对齐

注：书写在伸缩容器中

align-content:flex-start;换行后往上边挤
align-content:flex-end;对齐底部
align-content:center;垂直居中对齐
align-content:space- round;伸缩项对齐两端
align-content：space-between;每个伸缩项左右会留一定的空间

子元素属性

垂直对齐

如果想要控制侧轴上单个列表项，则需要在为伸缩项单独设align-self属性，设置align-content后失效

align-self:flex-start;默认
align-self:flex-end;对齐尾部
align-self:center;垂直居中对齐
align-self:baseline;基线对齐
align-self：stretch;(拉伸对齐，等高对齐)

排序

每个伸缩项中都有一个order属性,默认为0；

order越大，伸缩项排在越后边

例：order:3;

 div span:nth-child(1) {
  order: 1;
}

伸缩项扩充

（扩充剩余）

每个伸缩项中都有一个flex-grow属性；默认为0；

flex-grow决定了当前伸缩项扩充的大小，

扩充公式：扩充值=伸缩项的份数*剩余空间的平均值

例：flex-gorw:4;（当前伸缩项扩充4份）

注：只有所有伸缩项总和小于容器时候才能生效

伸缩项缩小

每个伸缩项中都有一个flex-shrink属性；默认为1；

flex-shrink决定了当前伸缩项收缩的大小，

收缩公式：收缩宽度=溢出的宽度 * 当前项宽度 * 当前项份数/权重值（每一项份数*每一项宽度之和）

flex-shrink：0（不进行收缩）

注：只有所有伸缩项总和大于容器时候才能生效

伸缩项宽度

flex-basis:auto;默认值，被内容撑大

flex-basis:200px；设置当前伸缩项的宽度值为200px

具体值：flex-basis优先级高于width，低于max-width;

非是具体值：看谁设定的值更为具体

连写格式

flex：0 1 auto; 默认值（扩充 缩小 宽度）

flex:1; === flex: 1 1 0%;(奇淫技巧)