Css样式布局之Flex弹性盒子布局
主轴/交叉轴：根据父元素样式flex-direction属性进行调整方向
一、设置为flex布局
/* 父元素设置样式 */ display: flex;
二、父元素可设置的样式
1.flex-direction：决定主轴方向，交叉轴则是对应方向
属性：
- 1.row(默认)：水平方向从左往右
- 2.row-reverse：水平方向从右往左
- 3.column：水平方向从上往下
- 4.column-reverse：水平方向从下往上
2.justify-content：决定flex items在主轴的对齐方式
属性：
- 1.flex-start(默认)：左对齐
- 2.flex-end：右对齐
- 3.center：居中对齐
- 4.space-evenly:每一个item等分对齐
- 5.space-between:第一个item和最后一个item靠两边，其他item等分
- 6.space-around：第一个item和最后一个item距离边缘的距离为中间的其他item间距的一半
3.align-items：决定了flex items在交叉轴上边的对齐方式
属性：
- 1.flex-start(默认)：交叉轴顶部对齐
- 2.flex-end：交叉轴底部对齐
- 3.center：交叉轴居中对齐
- 4.baseline：基线对齐
4.flex-wrap：决定flex items超出长度时候的展示方式
属性：
- 1.nowrap：不换行
- 2.wrap:超出换行(第二行items会到父盒子高度均分之后的位置)
- 3.wrap-reverse：反转换行
5.flex-flow：flex-direction 和 flex-wrap 的缩写属性，可以将两个属性合并使用
例如：
flex-flow: row wrap;
6.align-content：决定多行flex items在交叉轴上的对齐方式
属性：
- 1.flex-start:交叉轴上从上往下紧挨着排序
- 2.flex-end:交叉轴上从下往上紧挨着排序
- 3.center:交叉轴上中心点排序
- 4.space-evenly:交叉轴上每一个item等分对齐
- 5.space-between:交叉轴上第一个item和最后一个item靠两边，其他item等分
- 6.space-around：交叉轴上第一个item和最后一个item距离边缘的距离为中间的其他item间距的一半
三、子元素可设置的样式
1.order：决定flex item排序的顺序
可以设置不同的值(正整数、负整数、0)，值越小排在越前面，默认值0
2.align-self：决定子元素item在交叉轴的对齐方式
属性和align-items一致，只是设定单个item的交叉轴对齐方式
3.flex-grow：决定flex items 如何拓展
- 1.可以设置不同的值(正整数、负整数、0)，值越小排在越前面，默认值0
- 2.只有在父元素有多余空间时才会生效
注：
当item中的flex-grow和大于1时，按比例均分父元素空间；
当flex-grow和小于1时，将(父元素剩余空间*flex-grow+子元素原有空间)
4.flex-shrink：决定了flex item 如何收缩
- 1.可以设置不同的值(正整数、负整数、0)，值越小排在越前面，默认值1
- 2.只有当item所有宽度大于父盒子宽度才会生效
注：
当item中的flex-shrink和大于1时，按比例收缩每一个item在父元素的空间；
当flex-grow和小于1时，将(子元素原有空间-超出父元素剩余空间*flex-grow)
5.flex-basis：用来设置主轴上元素item的大小
- 1.可以设置item在主轴上的宽度，如200px
6.flex：flex-grow和flex-shrink和flex-basis的缩写属性，可以指定设置他们三个的值
- 1.一个无单位数的值(number)，则当作flex-grow
- 2.一个有效的宽度值(width)，则当作flex-basis
- 3.关键字：none，auto，initinal
