理解定义
flex container：对要处理的div开启flex布局 display:flex|inline-flex(指定DIV后面的行内元素也会在同一行内)成为flex container
flex items：指container里的多个子项目
主(横)轴： main axis-->起点main start 终点main end,最大宽度main size
交叉(竖)轴：corss axis-->起点corss start 终点 corss end,最大高度 corss size
应用在flex container上的CSS属性
flex-direction:定义flex items方向:(row|row-reverse|column|column-reverse)
row:主轴从左对齐开始排
row-reverse:主轴从右对齐开始排
justify-content:决定flex items在横轴上的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中对齐
space-between 之间等距且两边对齐
space-evenly 之间等距两边也等距
space-around 之间等距两边减半
flex-wrap:决定了多个items被挤压时是否要换行(unwrap|wrap换|wrap-reverse)
flex-flow:是flex-direction和flex-wrap的缩写，如：row-reverse wrap
align-items:决定了flex items在纵轴上的对齐方式
normal,stretch(未设置高度时自动拉伸),flex-start,flex-end,center,baseline
align-content:决定了多行flex items在纵轴上的对齐方式。同justify-content类似
-----------------------------------------------------------------------------------------------------------
应用在flex items上的CSS属性
flex:是flex-grow|flex-shrink|flex-basis的缩写,可以是1-3个值
如1,2,30px(flx-grow,flex-shrink,flex-basis)
1个值代表flex-grow
flex-grow:决定flex items如何扩展，默认0，要求>=0
flex-basis:设置flex items 在横向上的base size值如 100px
flex-shrink:决定flex items如何收缩，数字值
order:数字值排序，值越小越前面，默认0
align-self：覆盖父元素align-item的属性，用的少