超详细解析前端flex布局

1、基本概念

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

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

2、容器的属性

以下6个属性设置在容器（父元素）中

1、flex-direction

2、flex-wrap

3、flex-flow

4、justify-content

5、align-items

6、align-content

2.1、flex-direction：设置主轴对齐方式

取值：row/row-reverse/column/column-reverse

2.1.1 row（默认值）：主轴为水平方向，起点在左端

 .box {
            display: flex;
            flex-direction: row;
        }

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

 .box {
            display: flex;
            flex-direction: row-reverse;
        }

2.1.3 column： 主轴为垂直方向，起点在顶端

 .box {
            display: flex;
            flex-direction: column;
        }

2.1.4 column-reverse：主轴为垂直方向，地点为底端

.box {
            display: flex;
            flex-direction: column-reverse;
        }

2.2、flex-wrap：默认内容在一条直线上，当位置不够时，如何排布

取值：/wrap/wrap-reverse/nowrap

2.2.1nowrap：不换行

.box {
            display: flex;
            flex-wrap: nowrap;
        }

2.2.2wrap：换行，第一行在上方

.box {
            display: flex;
            flex-wrap: nowrap;
        }

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

.box {
            display: flex;
            flex-wrap: wrap-reverse;
        }

2.3、flex-flow：flex-direction和flex-wrap的缩写

默认值：row nowrap

2.4、justify-content：定义内容在容器主轴上的对齐方式

取值：flex-start/flex-end/center/space-between/space-around

2.4.1 flex-start （默认）：

2.4.2 flex-end：

2.4.3 center：

2.4.4 space-between：两端对齐，中间间距相等

2.4.5 space-around：每个项目两侧间隔相等

2.5、align-items：定义项目在交叉轴的对齐方式

取值：flex-start/flex-end/center/baseline/stretch

2.5.1 flex-start（）：顶端对齐

2.5.2 flex-end：底端对齐

2.5.3 center：中间对齐

2.5.4 base-line：第一行文字基线对齐

2.5.5 stretch（默认）：如果项目没有设置高度或者设置auto时，简沾满整个容器

2.6、align-content：定义多根轴线对齐方式，只有一根轴线则该属性不起作用

取值：flex-start/flex-end/center/stretch/space-between/space-around

2.6.1 flex-start：交叉轴起点对齐

2.6.2 flex-end：交叉轴终点对齐

2.6.3 center：交叉轴中点对齐

2.6.4 space-between：与交叉轴两端对齐，中间间隔平均分布

2.6.5 space-around：每根检查轴两侧的间隔相等

2.6.6 stretch： 轴线沾满整个交叉轴（默认值）

3、项目的属性

3.1 order：定义项目的排列顺序 数值越小越靠前

3.2 flex-grow：

定义项目的放大比列，默认值为0（即使有空余空间也不放大）如果全部项目的flex-grow属性值为1，则平均分配善于空间，如果有一个值为2，其他值为1，则前者占据的空间比后者大一倍（倍数关系）

3.3 flex-shrink：

定义项目缩小比列，默认值为1，如果空间 不足，项目将缩小，如果有一个项目的flex-shrink值为0，当空间不足时，前者不缩小，其余缩小

（如图粉红色区域没有缩小）

3.4 flex-basis：

定义在分配多余空间之前，项目占据的主轴空间，默认值为auto，即本来项目的大小。它可以设置为和width或height属性一样的值（如350px），则项目占据该固定区域

3.5 flex：

flex-grow，flex-shrink和flex-basis的简写形式，默认值为0 1 auto（后两个值可选）

3.6 align-self ：

3.4 flex-basis：

定义在分配多余空间之前，项目占据的主轴空间，默认值为auto，即本来项目的大小。它可以设置为和width或height属性一样的值（如350px），则项目占据该固定区域

3.5 flex：

flex-grow，flex-shrink和flex-basis的简写形式，默认值为0 1 auto（后两个值可选）

3.6 align-self ：

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于sstretch