Flex 布局详解

flex-direction：
使用在display:flex的父容器里，改变横轴的方向：
1.flex-direction:row:默认值,从左到右
2.flex-direction:row-reverse:从右到左
3.flex-direction:column:从上到下
4.flex-direction:column-reverse:从下到上
flex-wrap：
使用在display:flex的父容器里，改变纵轴的方向：
1.flex-wrap:nowrap:默认值，不换行
2.flex-wrap:wrap:wrap;flex-direction:row:换行，从左到右,从上到下的换行
3.flex-wrap:wrap-reverse；flex-direction:row:从左到右，从下到上的换行
4.flex-wrap:wrap-reverse；flex-direction:column:从上到下的换行，并且从右到左
5.flex-wrap:wrap；flex-direction:column:；
flex-flow：
flex-flow为flex-direction和flex-wrap的缩写方式
flex-flow:<'flex-direction'>||<'flex-wrap'>

order：
改变伸缩项的位置，使用在子元素里
order:<integer>
justify-content：
使用在display:flex的父容器里
1.justify-content:flex-start,默认值，
2.justify-content:flex-end,子项向横轴的终点靠齐
3.justify-content:center,子项向横轴的中间靠齐
4.justify-content:space-between,子项向横轴的左右两边靠齐
5.justify-content:space-around,子项平均分布，且带有间隙
align-item:
使用在display:flex的父容器里
1.align-item:stretch,默认值，默认把子项拉伸至父容器的高度,子项如果设置高度则不拉伸
2.align-item:flex-start,父容器的上面
3.align-item:center,父容器的中间，常用于垂直居中
4.align-item:flex-end,父容器的下面
align-self:
使用在指定的伸缩子项里，
1.align-item:stretch,默认值，默认拉伸至父容器的高度,子项如果设置高度则不拉伸
2.align-item:flex-start,相对于父容器居上
3.align-item:center,相对于父容器居中，常用于垂直居中
4.align-item:flex-end,相对于父容器居下
align-content:
使用在display:flex的父容器里
1.align-content:flex-start,全部子项在侧轴的上面
2.align-content:flex-end，全部子项在侧轴的下面
3.align-content:center，全部子项在侧轴的中间
4.align-content:stretch，全部子项都被拉伸至父容器高度
5.align-content:space-between，全部子项分布在侧轴上下
6.align-content:space-around，全部子项在侧轴均匀分布，有间隙

flex-grow：
设置子项的伸展程度,可加在父容器或子项
flex-grow:<integer>

flex-shrink：
设置子项的收缩程度，可加在父容器或子项
flex-shrink:<integer>

flex-basis：
设置子项的前的尺寸
flex-basis:auto|<length>
设置了grow或shrink的伸缩项将以这个尺寸为基准进行伸缩

flex:
flex-grow,flex-shirk,flex-basis的缩写形式。
flex:none|[<'flex-grow'> <'flex-shrink'>? ||<'flex-basis'>]
flex:none;=flex:0 0 auto;
如果某个属性不写，默认值为：
flex-grow:1; flex-shrink:1; flex-basis:auto;