CSS3弹性盒
一、介绍：
css3引入一种新的布局模式——Flexible Box布局，即伸缩布局盒模型（弹性盒布局），用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。
主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）,flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器,最重要的是，flex布局反向不可预知。
二、弹性盒术语：
伸缩容器：弹性盒子-父元素
伸缩项目：弹性盒子的子元素
主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局;它不一定是水平的；这主要取决于“justify-content”属性（详细见下文）。
主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点（main-start）向主轴终点（main-start）方向。
主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。
侧轴（cross axis）：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
侧轴起点（cross-start）和侧轴终点（cross-end）：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴尺寸（cross size）：伸缩项目在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。
三、设置在弹性容器（父容器）上的属性：
（1）display：设置元素为弹性盒
属性值： flex/inline-flex将原本的盒模型改成弹性盒模型;
效果：使内部元素获得弹性布局的效果，原本应该垂直排列的4个子div，被默认从左到右水平排列了。
（2） flex-direction： 属性规定灵活项目（子元素）的方向（设置主轴方向）。
| 值 | 描述 |
|---|---|
| row | 默认值。灵活的项目将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 灵活的项目将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
（3） flex-wrap：用于设置伸缩项目在主轴上的换行方式
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
（4） flex-flow：用于合并指定flex-direction和flex-wrap属性，默认值为row nowrap，该属性单纯为了简化代码而已；
（5） justify-content：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
（6） align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式（单行子元素在侧轴）
| 值 | 描述 |
|---|---|
| stretch | 默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。 |
| center | 元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
| flex-start | 元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| baseline | 元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。 |
（7） align-content：用于设置多行子元素在容器侧轴上的对齐方式(多行时才有效，设置多行子元素在侧轴)
| 值 | 描述 |
|---|---|
| stretch | 默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 |
| center | 元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。 |
| flex-start | 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。 |
| flex-end | 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。 |
| space-between | 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布 |
| space-around | 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 |
四、设置在伸缩项目（子元素）上的属性：
（1）align-self：属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。 |
| stretch | 元素被拉伸以适应容器。 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。 |
| center | 元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 |
| flex-start | 元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| flex-end | 元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| baseline | 元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。 |
（2）flex-grow：用于设置或检索弹性盒子的扩展比率
即当容器空间大于内部元素空间之和时，剩余部分将根据各元素指定的flex-grow按比例分配，使各元素增大；默认值为0，表示剩余空间不分配。
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 |
（3）flex-shrink：设置弹性盒的收缩比率
（4）flex-basis：设置了 flex 元素在主轴方向上的初始大小。它是width属性的替代品，优先级比width高
- 默认值是auto（有width参考width,没width，参考内容）
- 依赖flex项目的content
（5）order：设置弹性项目在布局时的顺序
- 默认值是0
- order 值大的 flex 项比 order 值小的在显示顺序中更靠后。（order值越大越靠后）
（6）flex
-
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
-
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 |
| flex-basis | 项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |