任何元素都可以指定为flex布局
display：flex/inline-flex（display:-webkit-flex;webkit前缀）
设置为flex布局之后，子元素的float、clear、vertical-align属性失效
flex布局默认首行左对齐flex容器，
flex项目
水平的主轴（main axis）
垂直的交叉轴（cross axis）
主轴的开始位置（main start）
主轴的结束位置（main end）
交叉轴的开始位置（cross start）
交叉轴的结束位置（cross end）
单个项目占据的主轴空间（main size）
单个项目占据的交叉轴空间（cross size）
容器的属性
flex-direction(主轴的方向):row/row-reverse/column/column-reverse
flex-wrap(是否换行):nowrap/wrap/wrap-reverse
flex-flow:(flex-direction和flex-wrap的简写)
justify-content(项目在主轴上的对齐方式):flex-start/flex-end/center/space-between/space-around
align-items(项目在交叉轴上的对齐方式):flex-start/flex-end/center/baseline/stretch
align-content(多根轴线的对齐方式):flex-start/flex-end/center/space-between/space-around/stretch
项目的属性
order:整数（次序）
flex-grow:整数（放大比例）
flex-shrink：整数（缩小比例）
flex-basis:
flex属性: flex-grow,flex-shrink,flex-basis的简写(建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。)
align-self属性: auto,flex-start,flex-end,center,baseline
几个基本的flex布局
- 左固定右自适应等高布局
- 左右固定，中间自适应宽度底部对齐布局
- 多行响应式布局
