什么是 Flexbox？
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
- 在不同方向排列元素
- 重新排列元素的显示顺序
- 更改元素的对齐方式
- 动态地将元素装入容器
什么情况下不建议使用 Flexbox？
虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：
- 整体页面布局
- 完全支持旧浏览器的网站
浏览器支持 Flexbox 的情况：
旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合 float 的 display: inline-block 或者 display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。
在 Flexbox 模型中，有三个核心概念：
1、flex 项（注：也称 flex 子元素），需要布局的元素
2、flex 容器，其包含 flex 项
3、排列方向（direction），这决定了 flex 项的布局方向（注：更多的文章叫主轴）
Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
属性总结表：
容器属性详述
- flex-direction
决定主轴的方向，即项目排列的方向，有四个可能的值：
| 属性 | 效果 |
|---|---|
| row (默认) | 主轴为水平方向，项目沿主轴从左至右排列 |
| column | 主轴为竖直方向，项目沿主轴从上至下排列 |
| row-reverse | 主轴水平，项目从右至左排列，与row反向 |
| column-reverse | 主轴竖直，项目从下至上排列，与column反向 |
- flex-wrap
默认情况下，item排列在一条线上，即主轴上，flex-wrap 决定当排列不下时是否换行以及换行的方式，可能的值：
| 属性 | 效果 |
|---|---|
| nowrap (默认) | 自动缩小项目，不换行 |
| wrap | 换行，且第一行在上方 |
| wrap-reverse | 换行，第一行在下面 |
- flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。
- justify-content
决定item在主轴上的对齐方式，可能的值有：
| 属性 | 效果 |
|---|---|
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| center | 居中对齐 |
| space- between | 两端对齐 |
| space-around | 沿轴线均匀分布 |
- align-items
决定了 item 在交叉轴上的对齐方式，可能的值有：
| 属性 | 效果 |
|---|---|
| flex-start | 顶端对齐 |
| flex-end | 底部对齐 |
| center | 竖直方向上居中对齐 |
| baseline | item第一行文字的底部对齐 |
| stretch | 当item未设置高度时，item将和容器等高对齐 |
- align-content
该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content可能值含义如下（假设主轴为水平方向）：
| 属性 | 效果 |
|---|---|
| flex-start | 左对齐 |
| flex-end | 右对齐 |
| center | 居中对齐 |
| space- between | 两端对齐 |
| space-around | 沿轴线均匀分布 |
| stretch | 各行将根据其flex-grow值伸展以充分占据剩余空间 |
Item 属性详述
item的属性在item的style中设置。item共有如下六种属性：
- order：order的值是整数，默认为0，整数越小，item 排列越靠前。
如下所示代码如下：
item 1
item 2
item 3
item 4
- flex-grow
定义了当flex容器有多余空间时，item 是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如：
item 1
item 2
item 3
即当有多余空间时item1、item2、和item3以1:2:3的比例放大。
- flex-shrink
定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item 自动缩小。
.item {
flex-shrink: ; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。如下代码：
item 1
item 2
item 3
- flex：flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
| 属性 | 效果 |
|---|---|
| auto （默认值） | 和父元素align-self的值一致 |
| flex-start | 顶端对齐 |
| flex-end | 底部对齐 |
| center | 竖直方向上居中对齐 |
| baseline | item第一行文字的底部对齐 |
| stretch | 当item未设置高度时，item将和容器等高对齐 |