Flex布局学习

参考资料：
阮一峰语法篇
阮一峰实例篇
flex介绍篇
flex讲解篇
flex实例篇

任何元素都可以指定为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布局

1. 左固定右自适应等高布局
2. 左右固定，中间自适应宽度底部对齐布局
3. 多行响应式布局