面试官：「弹性盒布局」
前言：
弹性盒布局全称为“Flexible Box Layout”，又叫flex布局。相对于传统布局来说，flex布局有以下几点优势：
- 灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。
- 对齐控制：可以轻松实现项目在容器中的水平或垂直对齐，以及对齐方式的多样性。
- 方向控制：可以方便地改变项目的主轴方向，实现水平或垂直布局。
flex布局初识
flex布局的组成主要有三部分，分别是轴，容器和项目，对于每一部分flex都有对应的属性控制，下面分别看下这三个部分别是什么样的。
轴
在flex中轴分为主轴和交叉轴，他们分别控制着布局的方向。
flex-dricetion（控制主轴的方向）
属性值分别是：row（默认值）| row-reverse | column | column-reverse。
📝flex-driection：row (主轴沿水平方向排列，起点在左边)
如下图：
📝flex-driection：row-reverse (主轴沿水平方向反向排列，起点在右边)
如下图：
📝flex-driection：column (主轴沿垂直方向排列，起点在上边)
如下图：
📝flex-driection：column-reverse (主轴沿垂直方向排列，起点在下边)
如下图：
容器
相比轴容器的属性就显得多多了，下面就一起看下容器的属性和属性值吧！
flex-warp（用于实现多行flex容器）
flex-warp的属性有以下三种，分别是no-warp（默认值）| warp | warp-reverse。
📝flex-warp：no-warp (所有元素将显示在一行)
如下图：
📝flex-warp：warp (当容器显示不下时，项目从上向下换行排列)
如下图：
📝flex-warp：warp-reverse (当容器显示不下时，项目从下往上换行排列)
如下图：
justify-content（定义项目在主轴上的排列方式）
属性值通常有以下几种：flex-start(默认值) | flex-end | center | space-between | space-around ｜ space-evenly
📝justify-content：flex-start (项目左对齐)
如下图：
📝justify-content：flex-end (项目右对齐)
如下图：
📝justify-content：center (项目居中对齐)
如下图：
📝justify-content：space-between (项目两端对齐，元素之间间隔相等)
如下图：
📝justify-content：space-around (每个项目的两侧距离相等，项目与项目之间的距离刚好是两边的2倍)
如下图：
📝justify-content：space-evenly (每个项目之间间隔及两侧的距离都相等)
如下图：
align-itams (定义交叉轴的对齐方式)
属性值通常有以下几种：flex-start(默认值) | flex-end | center | stretch | baseline
📝align-itams：flex-start (项目在交叉轴起点对齐)
如下图：
📝align-itams：flex-end (项目在交叉轴终点对齐)
如下图：
📝align-itams：center (项目在交叉轴中点对齐)
如下图：
📝align-itams：stretch (如果项目没有设置高度或者设置auto，将占满整个容器的高度)
如下图：
📝align-itams：baseline (基于元素第一行文字基线对齐)
如下图：
flex-flow (flex-flow属性是flex-direction属性和flex-wrap属性的简写形式)
由于flex-flow是flex-direction和flex-wrap的简写，这里就不再过多赘述了，属性值通常有以下几种情况：
- 第一种：单独设置flex-direction的属性，比如：
flex-flow: row | column - 第二种：单独设置flex-wrap属性，比如：
flex-flow: wrap | nowrap | wrap-reverse - 第三种：同时设置两者取值，比如
flex-flow: row wrap或flex-flow: column nowrap
align-content (定义多行项目交叉轴的对齐方式)
align-content和align-items的区别是align-items用于项目在主轴只有一行或者只有一列的情况，而align-content用于控制项目有多行或者多列时的排列方式。属性值通常有以下几种：flex-start | flex-end | center | stretch(默认值) | space-between ｜ space-around
📝align-content：flex-start (多行项目在交叉轴起点对齐)
如下图：
📝align-content：flex-end (多行项目在交叉轴终点对齐)
如下图：
📝align-content：center (多行项目在交叉轴中点对齐)
如下图：
📝align-content：space-between (交叉轴两端对齐，轴线之间的间隔平均分布)
如下图：
📝align-content：space-around (交叉轴两端对齐，轴线两侧的间隔相等)
如下图：
📝align-content：stretch (项目没有设置高度，项目占满整个交叉轴)
如下图：
项目
接下来一起看下项目上的属性吧！
flex-grow (定义项目放大比例，默认值是0，即存在剩余空间也不放大)
📝flex-grow (默认值:0)
当给容器中第三个项目设置flex-grow的值是0的时候，看上去和前面两个项目没有区别。如下图：
当给容器中第三个项目设置flex-grow的值是1的时候，会默认吃掉剩余空间。如下图：
当给容器中第二个项目设置flex-grow的值是1，第三个项目设置2的时候，这个时候第二个项目会吃掉1/3的剩余空间，第三个项目会吃掉2/3的剩余空间。如下图：
flex-shrink (定义项目缩小比例，默认值是1，即剩余空间不足也不缩小)
📝flex-shrink (默认值:1)
当容器设置宽600px，每个项目的宽设置为300px，第三个项目设置flex-shrink：1的时候，这个时候虽然空间是不够的，但是第三个项目和其他两个项目的占据的空间是一样的。
当容器设置宽600px，每个项目的宽设置为300px，第三个项目设置flex-shrink：0的时候，这个时候虽然空间是不够的，但是第三个项目也不会等比例缩小，仍然是300px。
还是上面的容器的宽度，如果我们想要一个项目保持自身300px宽度，一个项目宽度变成另一个项目宽度的2倍，可以这样设置。
从上面可以看出，当设置的flex-shrink的值越大，项目所占的宽度越小。
flex-basis (指定了 flex 元素在主轴方向上的初始大小)
📝flex-basis (默认值:auto)
当项目设置了flex-basis的值为auto时，意味着该项目在主轴的占据的长度是项目本身的大小。
当项目的flex-basis设置了百分比，代表的是该项目占据轴钱的百分比。
当项目的flex-basis设置了具体的数值，代表的是该项目具体像素。
older (元素排列顺序，数值越小，排列越靠前）
📝older (默认值:0)
如下图，分别设置他们的order的值为0，2，3。
align-self (允许单个项目和其他项目不同，用于覆盖align-items的值）
📝align-self (默认值:auto)
例如：单独设置第三个项目。
🤔️思考
flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。那么flex:0、flex:1、flex:2、flex:auto、flex:20%、flex:1 30px分别代表什么意思呢？
📝flex：0；
第三个项目设置flex：0；
📝flex：1；
第三个项目设置flex：1；
📝flex：2；
第三个项目设置flex：2；
📝flex：auto；
第三个项目设置flex：auto；
📝flex：20%；
第三个项目设置flex：20%；
📝flex：1 30px；
