1.1 flexbox
lexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。
1.2 flexbox 的使用
(1) 要开始使用Flexbox，必须先让父元素变成一个Flex容器。
(2) 你可以在父元素中显式的设置display:flex或者display:inline-flex。就这么的简单，这样你就可以开始使用Flexbox模块
(3) 实际是显式声明了Flex容器之后，一个Flexbox格式化上下文（Flexbox formatting context）就立即启动了
Flex容器（Flex Container）：父元素显式设置了display:flex
Flex项目（Flex Items）：Flex容器内的子元素
1.2.1 容器属性
(1) flex-direction
flex-direction属性控制Flex项目沿着主轴（Main Axis）的排列方向。主轴x水平方向，侧轴y垂直方向
它具有四个值：
/* ul 是一个flex容器 */
ul { flex-direction: row || column || row-reverse || column-reverse; }
- 属性解释：
row：x轴方向（默认主轴方向）
column：y轴方向
row-reverse：x正无穷到0方向
column-reverse:y正无穷到0方向
(2) flex-wrap
flex-wrap 控制元素换行，lex-wrap属性有三个属性值：
ul {
flex-wrap: wrap || nowrap || wrap-reverse;
}
- 属性解释：
flex-wrap属性的默认值是nowrap。也就是说，Flex项目在Flex容器内不换行排列。
(3) flex-flow
flex-flow是flex-direction和flex-wrap两个属性的速记属性。
多个值写在同一行，比如下面的示例：
ul {
flex-flow: row wrap;
}
相当于：
ul {
flex-direction: row;
flex-wrap: wrap;
}
(4) justify-content
justify-content属性可以接受下面五个值之一：
justify-content的默认属性值是flex-start。
使用方法：
ul {
justify-content: flex-start || flex-end || center || space-between || space-around
}
- 属性解释：
flex-start让所有Flex项目靠Main-Axis开始边缘（左对齐）。
flex-end让所有Flex项目靠Main-Axis结束边缘（右对齐）。
center让所有Flex项目排在Main-Axis中间（居中对齐）。
space-between让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）。
space-around让每个Flex项目具有相同的空间
(5) align-items
align-items属性类似于justify-content属性。只有理解了justify-content属性，才能更好的理解这个属性。它主要用来控制Flex项目在Cross-Axis对齐方式。
使用方法：
ul {
align-items: flex-start || flex-end || center || stretch || baseline
}
- 属性解释：
stretch:align-items的默认值是stretch。让所有的Flex项目高度和Flex容器高度一样。
flex-start:flex-start让所有Flex项目靠Cross-Axis开始边缘（顶部对齐）。
flex-end:flex-end让所有Flex项目靠Cross-Axis结束边缘（底部对齐）。
center:center让Flex项目在Cross-Axis中间（居中对齐）。
baseline让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐。
(6) align-content
让Flex容器中的Flex项目多行排列。
align-content属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。
像align-items属性一样，它的默认值是stretch。
- 属性解释：
stretch使用stretch会拉伸Flex项目，让他们沿着Cross-Axis适应Flex容器可用的空间。
flex-start之前你看到过flex-start。这次是让多行Flex项目靠Cross-Axis开始边缘。沿着Cross-Axis从上到下排列。因此Flex项目在Flex容器中顶部对齐。
flex-end刚好和flex-start相反，让多行Flex项目靠着Cross-Axis结束位置。让Flex项目沿着Cross-Axis从下到上排列，即底部对齐。
center让多行Flex项目在Cross-Axis中间。在Flex容器中居中对齐。
1.2.2 Flex项目属性
(1) order
允许Flex项目在一个Flex容器中重新排序。
order属性的默认值是0。它可以接受一个正值，也可以接受一个负值。
Flex项目会根据order值重新排序。从底到高。
(2) flex-grow 和 flex-shrink
flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。
他们可能接受0或者大于0的任何正数。0 || positive number
flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。
flex-shrink的值是1，也就是说flex-shrink开关也是打开的
(3) flex-basis
flex-basis属性可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前。
flex-basis默认的值是auto。flex-basis可以取任何用于width属性的任何值。比如 % || em || rem || px等。
注意：如果flex-basis属性的值是0时，也需要使用单位。即flex-basis: 0px不能写成flex-basis:0。
(4) flex速记
flex是flex-grow、flex-shrink和flex-basis三个属性的速记（简写）。
flex-grow第一，然后是flex-shrink，最后是flex-basis。缩写成GSB
(5) flex: 0 1 auto
li {
flex: 0 1 auto;
}
这相当于写了flex默认属性值以及所有的Flex项目都是默认行为。
