flex布局
提示
flex 布局的确是很好用，而且最近在开发快应用，快应用里面只能使用 flex 布局，所以再次学一下快应用的知识
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
# 一：主轴与交叉轴：
学习 flex 布局需要明白”主轴“与”交叉轴“的概念，采用 flex 布局的元素，称为”容器“ （ flex container），它的所有子元素都是容器的”项目“（flex item），容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
# 二：flex 容器属性
# 1.flex-direction
# 主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
# 2.flex-wrap
# 是否换行
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认值）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
# 3.justify-content
# 主轴的对齐方式
justify-content: flex-start | flex-end | center | space-around | space-between | space-between;
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-around：每个项目两侧的间隔相等。space-between：两端对齐，项目之间的间隔都相等。space-evenly：每个项目的间隔与项目和容器之间的间隔是相等的。
# 4.align-items
# 侧轴（交叉轴）的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）: 如果项目未设置高度或设为 auto，将占满整个容器的高度。 img (opens new window)
# 5.align-content
align-content 属性定义了多根轴线的对齐方式，前提是需要设置 flex-wrap: wrap，否则不会有效
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。stretch（默认值）：轴线占满整个交叉轴。
# 6.flex-flow
`flex-flow` 属性是 `flex-direction` 属性和 `flex-wrap` 属性的简写形式，默认值为 `row nowrap`
`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`
flex-flow: <flex-direction> || <flex-wrap>;
2
# 三：子元素属性
# 1.order 属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。可以是负数。
# 2.flex-grow 属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex 容器中剩余空间的多少应该分配给项目，也称为扩展规则。最终的项目的宽度为：自身宽度 + 容器剩余空间分配宽度，flex-grow 最大值是 1，超过 1 按照 1 来扩展
# 3.flex-shrink 属性
flex-shrink属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认值是 1
# 4.flex-basis 属性
flex-basis指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度 width
它可以设为跟width或height属性一样的值（比如 350px），则项目将占据固定空间。
flex-basis: 0 | 100% | auto | <length>
# 5.flex 属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
# 6.align-self 属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;