Flex布局

Flex布局（弹性布局）：

---

作用：

用于给盒状模型提供最大的灵活性。

面向对象：

任何一个容器都可以指定为Flex布局。.box { display:flex; }

基本概念：

1. 采用Flex布局的元素，称为Flex容器，他所有的子元素称为容器成员，称为Flex项目(flex item).
2. 容器默认存在两个轴—-水平主轴和垂直的交叉轴。项目默认沿主轴排列。

容器属性：

1.flex-direction:决定主轴的方向

2.flex-wrap:默认情况下，项目都排在一条线上（即轴线）。该属性定义，若是一条轴线上排不下时，如何换行。

3.flex-flow:是flex-direction和flex-wrap的简写。 默认情况下：.box{ flex-flow: row nowrap;}

4.justify-content:定义了项目在主轴上的对齐方式。

5.align-items:属性定义了项目在交叉轴上如何对齐。

6.align-content:定义了多个轴线的对齐方式，如果项目只有一个轴线，则该属性将不起作用。

项目的属性：

1.order:该属性定义项目的排列顺序，数值越小，排列越靠前，默认为0.

---

2.flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话),如果一个项目的lex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

---

3.flex-shrink:该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1,当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

---

4.flex-basis:定义了在分配多余空间之前，项目所占的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto,即项目本来的大小。
它可以设为width或height属性一样的值（比如100px），则项目将占据固定空间。

---

5.flex:是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto.后两个属性可选。 该属性有两个快捷值:auto(1 1 auto)和none（0 0 auto）,这两种方式推荐使用。

---

6.align-self:该属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素,则等同于stretch.
该属性也有6个可能的取值： .items{ align-self:auto | flex-start | flex-end | center
| baseline | stretch ；}