Flex 布局，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
基本概念
采用 Flex 布局的元素（display: flex），叫 flex container （容器）；容器内所有子元素，叫 flex item（项目）。
flex 布局的方向由 main axis （主轴） 和 cross axis （交叉轴） 确定，主轴方向取决于 flex-direction 的值（默认：从右到左），交叉轴方向取主轴逆时针旋转 90 度的方向。
常见属性
有些属性只作用于 flex container（容器）；有些属性只作用于 felx item（项目）。
flex container（容器）
flex-direction
flex-direction 属性定义了主轴的方向，指定了内部元素是如何在 flex 容器中布局的。
row（默认）：和容器的direction属性（文本方向）相同。- 如果
direction属性是ltr，row表示从左到右定向的水平轴; - 如果
direction属性是rtl，row表示从右到左定向的轴。
- 如果
row-reverse：和row相反column：从上到下column-reverse：从下到上
flex-wrap
flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，还可以指定行的堆叠方向。
no-wrap（默认）：不换行wrap：换行wrap-reverse：换行，交叉轴发生 reverse（cross-start 和 cross-end 互换）。
justify-content
justify-content 定义了元素在主轴方向上的分布规则。
常用属性值：
flex-start：从行首位置开始排列flex-end：从行尾位置开始排列center：居中排列space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点space-around：均匀排列每个元素，每个元素周围分配相同的空间space-evenly：均匀排列每个元素，每个元素之间的间隔相等
align-items
align-items 会统一设置所有直接子元素在交叉轴方向上的行内对齐方式。
常用属性值：
flex-start：元素向交叉轴起点对齐flex-end：元素向交叉轴终点对齐center：在交叉轴居中，如果元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同stretch：沿交叉轴方向的尺寸拉伸至与容器一致。baseline：基线对齐，这里的baseline默认是指首行文字，即first baseline，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
align-content
align-content 定义了行在交叉轴方向的分布规则。
该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。
常用属性值同 justify-content。
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
flex item（项目）
align-self
align-self 和 align-items 一样，定义元素在交叉轴方向上的行内对齐方式。但是 align-self 只对当前子元素生效，且优先级高于 align-items。
常见属性值，见 align-items。
flex
flex 是 flex-grow、flex-shrink、flex-basis 这三个属性的简写。
flex-grow：指定了 flex 容器中剩余空间应该如何分配给项目。flex-shrink：指定了 flex 容器中超出空间应该如何压缩项目，仅在默认宽度之和大于容器的时候才会发生收缩。flex-basis：指定了 flex 元素在主轴方向上的初始大小，同时设置flex-basis(除值为auto外) 和width/height时，flex-basis优先。
注意：
<'flex-grow'>，省略时默认值为 1。 (初始值为 0)<'flex-shrink'>，省略时默认值为 1。 (初始值为 1)<'flex-basis'>，省略时默认值为 0。(初始值为 auto)
flex 可能的组合方式：
order
order，指定的是项目的排列顺序，默认值为 0，可以为负值，数值越小排列越靠前。
