一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局；行内元素也可以使用 Flex 布局；

Webkit 内核的浏览器，必须加上-webkit前缀！

（注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。）

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

flex布局

       容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

       项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

设置在容器上：   1.flex-direction

                            2.flex-wrap

                            3.flex-flow

                            4.justify-content

                            5.align-items

                            6.align-content

1.flex-direction

    flex-direction属性决定主轴的方向（即项目的排列方向）

1.1 row

1.2 row-reverse

1.3 column

1.4column-reverse

例：

css:

.box

.div2

1.1 row：主轴为水平方向，起点在左端。

flex-direction: row

html:

1.1

1.2 row-reverse：主轴为水平方向，起点在右端。

flex-direction: row-reverse

html:

1.2

1.3 column：主轴为垂直方向，起点在上沿。

flex-direction: columnhtml:

html:

1.3

1.4 column-reverse：主轴为垂直方向，起点在下沿。

flex-direction: column-reverse

html:

1.4

 2.flex-wrap

       默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

2.1 wrap

2.2 nowrap

2.3 wrap-reverse

例：

css:

.box2

.div2

2.1 wrap：换行，第一行在上方。

flex-wrap:wrap

html:

。。。

2.1

2.2 nowrap：不换行

flex-wrap:nowrap

html：

。。。

2.2

2.3 wrap-reverse：换行，第一行在下方。

flex-wrap:  wrap-reverse

。。。

2.3

3.justify-content

    定义了项目在主轴上的对齐方式

3.1 flex-start

3.2 flex-end

3.3 center

3.4 space-between

3.5 space-around

例：

css:

.box

.div3

3.1 flex-start:左对齐

justify-content:flex-start

html:

3.1

3.2 flex-end:右对齐

justify-content: flex-end

html:

3.2

3.3 center:居中

justify-content: center

html:

3.3

3.4 space-between:两端对齐，项目之间的间隔都相等

justify-content: space-between 

html:

3.4

3.5 space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content:  space-around

html:

3.5

4.flex-flow

      是 flex-direction 和 flex-wrap 属性的复合属性。(如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用)。默认值：row:主轴为水平方向，起点在左端 nowrap:不换行。

例：

4.1 row nowarp

4.2 row warp-reverse

例：

.box4

.div4

4.1 row nowarp:主轴为水平方向，起点在左端,不换行

flex-flow:row nowarp

html:

。。。

4.1

4.2 row warp-reverse:主轴为水平方向，起点在右端,换行，第一行在下方

flex-flow: row warp-reverse

html:

4.2

5.align-items

     定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

5.1 flex-start

5.2 flex-end

5.3 center

5.4 baseline

5.5 stretch

例：

css:

.box5

.div5

5.1 flex-start:元素位于容器的开头

align-items:flex-start

html:

5.1

5.2 flex-end:元素位于容器的结尾

align-items: flex-end

html:

5.2

5.3 center:元素位于容器的中心

align-items: center

html:

5.3

5.4 baseline:元素位于容器的基线上

align-items:  baseline

html:

5.4

5.5 stretch:默认值。元素被拉伸以适应容器

align-items:stretch

html:

5.5

6.align-content

     在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

6.1 flex-start

6.2 flex-end

6.3 center

6.4 space-between

6.5 space-around

6.6 stretch

例：

css:

.box6

.div6

6.1 flex-start:元素位于容器的开头

align-content:flex-start

html:

6.1

6.2 flex-end:元素位于容器的结尾

align-content: flex-end

html:

6.2

6.3 center:元素位于容器的中心

align-content: center

6.3

6.4 space-between:元素位于各行之间留有空白的容器内

align-content:space-between

6.4

6.5 space-around:元素位于各行之前、之间、之后都留有空白的容器内

align-content: space-around

6.5

6.6 stretch:默认值。元素被拉伸以适应容器

align-content: stretch

6.6

7.order

      设置或检索弹性盒模型对象的子元素出现的順序（即数值越小，排列越靠前，默认为0）

例：

html:

css:

8.flex-grow

      用于设置或检索弹性盒子的扩展比率

例：

html:

css:

9.align-self

       定义flex子项单独在侧轴（纵轴）方向上的对齐方式，可覆盖align-items的属性（默认值为auto，表示继承父元素的align-items的属性，如果没有父元素，则等同于stretch）

例：

html:

css: