Flex 之前
flex 值未被添加时的布局方法：
- normal flow（文档流）
- float + clearfix
- positon: relative + absolute
- display: inline-block
- margin: -
Flex
在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸。既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。
子元素的水平对齐和垂直对齐都能很方便的进行操控。
在 flex 容器（flex container）中默认存在两条轴，水平主轴（main axis） 和垂直的侧轴（cross axis），这是默认的设置。可以通过修改flex-direction使垂直方向变为主轴，水平方向变为侧轴。（当主轴的方向改变时，主尺寸也随之改变 ）
在容器中的每个子项被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
Flex Container 的属性
flex-direction
flex-direction：决定主轴的方向。
/* 默认值，主轴方向为水平方向，主轴起点在左侧 */
flex-direction: row;
/* 主轴方向为水平方向，主轴起点在右侧 */
flex-direction: row-reverse;
/* 主轴方向为垂直方向，主轴起点在上方 */
flex-direction: colum;
/* 主轴方向为垂直方向，主轴起点在下方 */
flex-direction: colum-reverse;
flex-wrap
flex-wrap：决定 flex 子项在 flex 容器里是否换行。
/* 默认值，flex 容器空间不足时，flex 子项尺寸会随之调整并不会换行 */
flex-wrap: nowrap;
/* flex 容器空间不足时，flex 子项尺寸不会随之调整并换行 */
flex-wrap: wrap;
/* flex 容器空间不足时，flex 子项换行（以行为单位）反向排列 */
flex-wrap: wrap-reverse;
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的缩写。
.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content：决定 flex 子项在主轴的对齐方式。
/* 默认值，flex 子项与主轴起点对齐 */
justify-content: flex-start;
/* flex 子项与主轴终点对齐 */
justify-content: flex-end;
/* flex 子项与主轴中间对齐 */
justify-content: center;
/* flex 子项均匀分布，第一项与主轴起点对齐，最后一项与主轴终点对齐 */
justify-content: space-between;
/* flex 子项均匀分布，两端隔间比子项间距离小一倍，空隙将 flex 子项均匀包裹 */
justify-content: space-around;
align-items
align-items：决定 flex 子项在侧轴的对齐方式。
/* 默认值，flex 子项与侧轴起点对齐 */
align-items: flex-start;
/* flex 子项与侧轴终点对齐 */
align-items: flex-end;
/* flex 子项与侧轴中间对齐 */
align-items: center;
/* flex 子项在 flex 容器的基线位置显示 */
align-items: baseline;
/* flex 子项在侧轴方向被拉伸到与 flex 容器相同的高度或宽度 */
align-items: stretch;
align-content
align-content：决定多行 flex 子项在侧轴的对齐方式。（子项为单行时没有效果）
/* 多行都集中在侧轴起点 */
align-content: flex-start;
/* 多行都集中在侧轴终点 */
align-content: flex-end;
/* 多行都集中在侧轴中间 */
align-content: center;
/* 每一行都被拉伸以填满容器 */
align-content: stretch;
/* 行行之间距离相等，第一行与侧轴起点对齐，最后一行与侧轴终点对齐 */
align-content: space-between;
/* 行行之间距离相等，两端隔间比子项间距离小一倍，空隙将行均匀包裹 */
align-content: space-around;
flex item 的属性
flex-grow
flex-grow：决定了 flex 子项的增长比例。（空间过多时）
.item {
flex-grow: <number>; // 数值，可以是小数，默认值是 0
}
flex-shrink
flex-shrink：决定了 flex 子项的收缩比例。（空间不够时）
.item {
flex-shrink: <number>; // 数值，可以是小数，默认值是 0
}
flex-basis
flex-basis：flex 子项的默认大小。（一般不用）
.item {
flex-basis: <length> | auto; // 默认值是 auto
}
flex
flex 是flex-grow 和 flex-shrink 和 flex-basis 的缩写。
.item {
flex: <flex-grow> || <flex-shrink> || <flex-basisk>;
}
order
order：改变某一 flex 子项的排序位置。
.item {
order: <integer>; // 整数，所有子项默认值为 0，有子项值为 -1 时，便可排至最前面
}
align-self
align-self：单个 flex 子项自身的对齐方式。
/* 值为 auto 时，继承 flex 容器的 align-items 属性 */
align-self: auto;
/* 单个 flex 子项自身与侧轴起点对齐 */
align-self: flex-start;
/* 单个 flex 子项自身与侧轴终点对齐 */
align-self: flex-end;
/* 单个 flex 子项自身与侧轴中间对齐 */
align-self: center;
/* 单个 flex 子项自身在 flex 容器的基线位置显示 */
align-self: baseline;
/* 单个 flex 子项自身在侧轴方向被拉伸到与 flex 容器相同的高度或宽度 */
align-self: stretch;
