flex布局
容器的属性
- 容器的属性
1.flex-direction 决定item的排列方向
row 、row-reverse、 column、 column-reverse
2.flex-wrap 排列不下时，item如何换行
nowrap、wrap、wrap-reverse
3.flex-flow flex-direction和flex-wrap的简写，
row nowrap
4.justify-content item在主轴上的对齐方式
flex-start flex-end center space-between space-around
5.align-items item在交叉轴上的对其方式
flex-start flex-end center baseline(文字对齐) stretch(伸缩)
6.align-content 多根轴线的对其方式
flex-start flex-end center space-between space-around stretch - item的属性
1.order 定义item的排列顺序，默认为0，越小越靠前
2.flex-grow 当有多余空间时，item的放大比例，默认为0，即有多余空间也不放大
flex-grow:2 flex-grow:2 flex-grow:1
即把多余空间分成5分，第一、二个项目增加2份，第三个项目增加1份
3.flex-shrink 当空间不足时，item的缩小比例，默认为1，即空间不足时所辖
flex-shrink:2 flex-shrink:2 flex-shrink:1
把需要缩放的空间分成5份，例如：要缩放200px，则第一个item要缩小80px,最后一个项目缩小40px
4.flex-basis 项目在主轴上占据的空间，长度值，默认为auto
5.flex:grow shrink basis的缩写，默认：0 1 auto
6.align-self 单个item的独特对齐方式，同align-items，可覆盖align-items属性
