flex布局子项属性
1、flex属性
源代码
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
flex 属性是 flex-grow flex-shrink fiex-basis 三个属性的简写假设以上三个属性网样歇默认值。则 flex 的默认值是 0 1 autoa
关于 flex 的取值，有以下几种方式:
flex: auto; 等价于 1 1 auto。也就是允许增长，允许缩小，宽度为自动。
flex: none; 等价于 0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。
flex: 非负数字; 这个数字表示的是 flex-grow 的值，flex-shrink 为 1，表示允许缩小，flex-basis 为0%。可以认为他就是把剩余的空间进行填充
flex: 0; 对应的三个值分别为 0 1 0%
flex: 长度成者百分比; 则这个值视为 flex-basis 的值，而 flex-grow 为 1.fex-shrink 为1
flex: 两个非负数字; 分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%
flex: 一个非负数字和一个长度或百分比; 则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1
auto: 等价于1auto。也就是允许增长，允许缩小，宽度为自动。none: 等价于00auto。也就是不允许增长，不允许缩小，宽度为自动。非负数字:这个数字表示的是 flex-grow 的值，flex-shrink 为 1，表示允许缩小，flex-basis 为0%。可以认为他就是把剩余的空间进行填充。
0:对应的三个值分别为010%
长度成者百分比:则这个值视为 flex-basis 的值，而 flex-grow 为 1.fex-shrink 为1.两个非负数字:分别视为 flex-grow 和 flex-shrink 的值，flex-bass 取 0%个非负数字和一个长度或百分比;则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1.
2、align-self控制子项自己在侧轴上的排列方式
源代码
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
align-self: flex-start; 头部排列
align-self: center; 中间排列
align-self: flex-end; 尾部排列
3、flex-basis控制子项自己在主轴上的分配空间
源代码
定义了在分配多余空问之前，项目占据的卡轴空间，满览器根器这个属性，计算主辖是否有多余空问
flex-basis: 0; 把该元素视为0尺寸，可以设置px值
flex-basis: auto; 元素原本的尺寸，默认值
4、flex-grow
设置元素是否需要扩大的比例。默认值为 0，即如果存在剩余空问，也不放大
5、flex-shrink
定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
6、order属性定义项目的排列顺序
源代码
数值越小，排列越靠前，默认为0
注意：和z-index不一样
order: number; 填数值，越小排列越靠前
