摘要：Flex布局的相关知识
基础概念
弹性盒子
main axis:Flex 容器的主轴，不一定是水平，也可能是竖直方向，这主要取决于 flex-direction 属性
main-start:主轴起点
main-end:主轴终点
main size:项目占据容器的主轴长度（即项目的 width 或 height），由哪一个对着主轴方向决定
cross axis:交叉轴，它与主轴垂直
cross-start:交叉轴起点
cross-end:交叉轴终点
cross size:项目占据容器的交叉轴长度（即项目的width或height），由哪一个对着交叉轴方向决定
注意：
1.块元素使用display:flex,行元素使用display:inline-flex
2.Flex布局以后，子元素的float、clear和vertical-align属性将失效
容器属性
flex-direction：决定主轴的方向（水平或竖直）
flex-wrap：是否换行
flex-flow：该属性是flex-direction属性和flex-wrap属性的简写
justify-content：定义项目在主轴方向上的对齐方式
align-items：定义项目在交叉轴上的对齐方式
align-content：定义了多行项目在交叉轴方向上的对齐方式，如果只有一条轴线，那么此属性不起作用
flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿
flex-wrap: nowrap | wrap | wrap-reverse; nowrap（默认值）：不换行 wrap：换行 wrap-reverse：换行，但顺序是从右向左排列
justify-content: flex-start | flex-end | center | space-between | space-around; flex-start（默认值）：对齐主轴的起点 flex-end：对齐主轴的终点 center：以主轴为参考，居中对齐 space-between：两端对齐，项目之间的间隔都相等，容器与项目之间无间隔 space-around：与space-between类似，但每个项目两侧的间隔相等，项目之间的间隔是项目与容器之间间隔的2倍
align-items: flex-start | flex-end | center | baseline | stretch; flex-start（默认值）：对齐交叉轴的起点 flex-end：对齐交叉轴的终点 center：以交叉轴为参考，居中对齐 baseline：按项目第一行文字基线对齐 stretch：尽可能接近所在行的尺寸，如果项目未定义高度或者设置为auto，Flex项目将占满整个窗口的高度
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 只有多行项目才有效果 flex-start（默认值）：对齐交叉轴的起点 flex-end：对齐交叉轴的终点 center：以交叉轴为参考，居中对齐 space-between：交叉轴两端对齐，轴线这间的间隔平均分布 space-around：每个项目两侧的间隔相等 stretch：尽可能接近所在行的尺寸，项目如果没有限制就会占满整个交叉轴
项目属性
order：用于控制项目的排列顺序，默认为 0，值越小越靠前,可以为负值
flex-grow：用于定义项目的放大比例，默认为 0，即使存在剩余空间，也不放大。如果所有项目的 flex-grow 属性值大小相同，它们将等分剩余空间。否则，按比例大小分配剩余空间。属性取负值将失效 flex-shrink：用于定义项目的缩小比例，默认为 1，如果空间不足，项目将等比缩小。如果值大于 1，按照比例缩小，值越大缩小越狠。如果值为0时，不会缩小。属性取负值将失效 flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），占据空间大小的优先级为 flex-basis > width/height。其默认值为 auto，即项目本来的大小（width/height）。可以设置 max-width/max-height 或 min-width/min-height 属性来设置其最大最小值。 flex：flex 属性是 flex-grow、flew-shrink 和 flex-basis 的简写，默认值为 0 1 auto，其第二个和第三个参数可选，推荐优先使用该属性。它有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。还有几种简写方式（均以 1 1 0% 为原始值，n 为非负数字，L 是单位为 px 或 % 的长度）： 1.flex:n => flex: n 1 0% 2.flex:n n => flex: n n 0% 3.flex:L => flex: 1 1 L 4.flex:n L => flex: n 1 L
align-self：允许单个项目有不同于其他项目的对齐方式，其值和效果都与 align-items 一致。默认值为 auto，表示继承父元素的 align-items 属性，如果不存在父元素，则等同于 stretch