一、flex布局概念

1、flex 是 flexible Box 的缩写，意思为弹性布局，使布局变得更加灵活，任何一个元素都可以定义为flex布局。

2、采用flex布局的元素称为flex容器，他的所有子元素自动成为容器成员，称为flex项目。

3、当父元素设置为flex布局之后，所有的子元素的 float、clear和 vertical-align 属性将不起作用。

4、flex容器存在两根轴，主轴（默认为水平轴）和副轴（默认为垂直轴），项目默认沿主轴排列。

5、总的来说就是通过设置父盒子为flex布局并设置父盒子和子盒子的相应属性，来控制子盒子的位置和排列方式。

二、flex容器的属性

1、所有属性

​ ① flex-direction：设置主轴方向。

​ ② justify-content：设置主轴上元素排列方式。

​ ③ flex-warp：设置子元素是否换行。

​ ④ align-content：设置侧轴上子元素的排列方式（多行）

​ ⑤ align-items：设置侧轴上的子元素排列方式（单行）

​ ⑥ flex-flow：复合属性，简写形式，同时设置 flex-direction 和 flex-warp 属性

2、flex-direction

​ 该属性用来设置容器主轴的方向，默认主轴方向为 x 轴方向，水平向右，侧轴方向为 y 轴方向，水平向下。当设置了主轴的方向，那么剩下的另一个方向就是侧轴方向。子元素是跟着主轴的方向来进行排列。

​ 属性值有四种：

​ ① row(默认值)：设置主轴为x轴方向，子元素从左向右排列

​ ② row-reverse：这只主轴为x轴方向，子元素从右向左排列

​ ③ clumn：设置主轴方向为y轴方向，子元素从上到下排列

​ ④ clumn-reverse：设置主轴方向为y轴方向，子元素从下往上排列

​ 如图分别为：clumn-reverse、clumn、row、row-reverse

3、justify-content

​ 该属性用来设置子元素在主轴上的排列方式，当然只适用于子元素排在一行上的情况，常用来设置中心对齐。当默认主轴为x轴方向时，属性值有五种：

​ ①flex-start(默认值)：左对齐

​ ② flex-end：右对齐

​ ③ center：居中对齐

​ ④ space-between：两端对齐，子元素之间的间隔平分多余空间

​ ⑤ space-around：平局分配多余空间，子元素两侧的间隔相等，所以总元素之间的间隔是子元素与边界的间隔的一倍。

4、flex-warp

​ 该属性用来设置主轴上的子元素是否换行，默认所有子元素都是排到一行上的。属性值有3种：

​ ① nowarp（默认）：不换行

​ ② warp：换行，第一行在最上面

​ ③ warp-reverse：换行，第一行在最下面

5、align-items

​ 该属性用来设置单行排列的侧轴上子元素的排列方式，通常用来设置垂直居中。属性值有5种：

​ ① flex-start：从头部开始

​ ② flex-end：从尾部开始

​ ③ center：居中

​ ④ strerch：拉伸占满整个盒子的高度

​ ⑤ baseline：子元素的第一行文字的基线对齐

6、align-content

​ 该属性用来设置多行排列的侧轴上子元素的排列顺序，属性值有6种：

​ ① flex-start：从头部开始

​ ② flex-end：从尾部开始

​ ③ center：居中

​ ④ strerch：每一行都拉伸，平均占满整个盒子的高度

​ ⑤ space-around：每一行上下两侧的间隔都相等，所以行之间的间隔是行与边界的间隔的两倍。

​ ⑥ space-between：第一行与头部对齐，最后一行与尾部对齐，中间的行的间隔平分剩余空间。

7、flex-flow

​ 该属性是flex-direction 和 flex-warp 属性的简写形式，默认值为： row 和 nowrap。

三、flex 项目的属性

1、所有属性

​ ① order：设置项目的排列顺序。

​ ② flex-grow：设置项目的放大比例。

​ ③ flex-shrink：设置项目的缩小比例。

​ ④ flex-basis：设置项目占据的主轴空间。

​ ⑤ flex：是flex-grow、flex-shrink和flex-basis 的简写方式。

​ ⑥ align-self：设置项目的对齐方式。

2、order

​ 该属性用来设置项目的排列顺序，数值越小，排列顺序就越靠前，默认为 0。

3、flex-grow

​ 该属性设置项目的放大比例，默认为0，即如果存在剩余空间，也不会放大项目。如果所有项目的flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4、flex-shrink

​ 该属性用来设置项目的缩小比例，默认为 1 ，即如果空间不足，项目将会缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

5、flex-basis

​ 该属性设置了项目在分配多余空间之前，项目占据的主轴空间，默认值为 auto ，即项目本来的大小。浏览器根据这个属性的值，计算主轴是否有多余空间。

6、flex

​ 该属性是flex-grow、flex-shrink和flex-basis 的简写方式，默认值为 0 1 auto，后两条属性可以省略。

​ 该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）

7、align-self

​ 该属性用来设置单个项目与其他项目不同的对齐方式，可覆盖align-items属性，默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。