共同学习
1、 任何容器均可设置为Flex布局，行内元素同样适用。对于Webkit内核的浏览器，需添加-webkit-前缀才能正确支持该布局方式。
2、 启用Flex布局后，子元素的float、clear及vertical-align属性将不再起作用。
3、 容器含六项属性
4、 -
5、 flex-direction 属性用于设置主轴方向，决定容器内项目排列的走向。
6、 主轴水平，起点在左，方向从左至右排列。
7、 主轴水平，方向从右端开始向左延伸排列。
8、 主轴垂直，起点位于上方。
9、 主轴垂直，方向从下往上排列。
10、 -
11、 flex-wrap属性用于设置当主轴空间不足时，子元素是否及如何换行排列。
12、 nowrap（默认）：内容不自动换行显示。
13、 换行显示，首行置顶排列
14、 换行排列，首行位于下方。
15、 -
16、 flex-flow属性是flex-direction与flex-wrap的简写，用于同时设置容器内元素的主轴方向和换行方式。
17、 默认布局为横向且不换行
18、 justify-content 属性用于设置项目在主轴方向上的对齐方式。
19、 左对齐（默认），内容靠容器起始端排列
20、 右对齐，元素靠容器末端排列
21、 居中对齐，位置在中间
22、 两端对齐，各项目间保持相等间距。
23、 项目两侧间距相同，导致项目间的距离是其与边框距离的两倍。
24、 -
25、 align-items 属性用于设置项目在交叉轴方向上的对齐方式。
26、 1所示（资料来源：阮一峰）
27、 元素沿交叉轴起始位置对齐排列。
28、 flex-end：项目在交叉轴终点处对齐。
29、 居中对齐：交叉轴方向上元素位于中间位置。
30、 项目首行文字的基线对齐方式。
31、 默认情况下，若项目高度未设置或为auto，则会填满容器的全部高度。
32、 -
33、 当容器内存在多行项目时，align-content 用于设置各行在交叉轴上的对齐方式；若仅有一行，则该属性无效。
34、 flex-start：元素紧贴交叉轴起始位置对齐。
35、 flex-end：元素对齐至交叉轴的末端位置。
36、 居中对齐于交叉轴的中心位置。
37、 沿交叉轴两端对齐，各轴线间间距均匀分布。
38、 space-around 表示每根轴线两边的间距相同，因此轴线之间的距离是轴线到边框距离的两倍。
39、 默认情况下，轴线会充满整个交叉轴空间。
40、 其中 item 包含以下六个属性：
41、 order属性决定.item的排列次序，数值越小越靠前，默认值为0。
42、 flex-grow属性用于设置.item的放大比例，默认值为0，表示即使有剩余空间也不进行放大。
43、 flex-shrink 属性规定了 .item 的缩小比例，默认值为1，表示当容器空间不足时，该元素将按比例缩小。
44、 当项目中某个元素的flex-shrink设为0，其余为1时，容器空间不足，该元素不会缩小，其他元素则按比例收缩。
45、 flex-basis 属性用于设定元素在分配多余空间前占据主轴的空间大小，浏览器据此判断主轴是否有剩余空间。该属性默认值为 auto，表示元素保持原有尺寸，不进行额外伸缩，常用于 flex 布局中的尺寸控制。
46、 flex属性是flex-grow、flex-shrink和flex-basis的简写形式，默认值为0 1 auto，其中后两个属性为可选项。
47、 该属性提供两个简写值：auto 对应 (1 1 auto)，none 对应 (0 0 auto)。
48、 align-self 属性用于设置某个 flex 项目单独的对齐方式，可覆盖容器的 align-items 设置。其默认值为 auto，即继承父元素的 align-items 值；若无父元素，则表现如同 stretch，使项目在交叉轴上拉伸以占满整个空间。该属性为单个项目提供独立的对齐控制能力。
49、 同上所述
50、 flex-start：元素紧贴交叉轴起始位置对齐。
51、 flex-end：元素对齐至交叉轴末端。
52、 居中对齐于交叉轴的中心位置。
53、 元素沿交叉轴两端对齐，各轴线间的间距均匀分布。
54、 各轴线两侧间距相等，因此轴线之间的距离是轴线到边框距离的两倍。
55、 默认情况下，轴线会填满整个交叉轴空间。
56、 我的看法：
57、 控制容器内元素在横轴上的排列方式，支持两端对齐和等间距分布。
58、 设置容器内纵向排列的布局方式
59、 调整容器内元素的布局方向
60、 容器内所有子容器保持相对位置不变，整体进行移动或旋转操作。
