因为是面试题, 所以就不去敲代码去一一实现了, 因为面试官不会让你现场去敲代码; 如果有遇到现场让你敲代码的面试, 那就直接 Pass 好了; 懂得都懂 。

1. display: flex;

1. 给父容器添加了 display: flex 属性, 就可以让容器内部打破原有文档流模式, 展现为弹性布局 。

2. flex 是什么属性的缩写:

1. flex 是 flex-grow 、 flex-shrink、 flex-basis 的缩写 。

2. 默认值为 flex: 0 1 auto; 后两个属性可选 。

3. 各个属性的基本介绍:
   1. flex-grow:    属性用于设置或检索弹性盒子的扩展比率 。
   2. flex-shrink:  flex-shrink 属性指定了 flex 元素的收缩规则; flex 元素仅在默认宽度之和大于容器的时候才会发生收缩, 其收缩的大小是依据 flex-shrink 的值 
   3. flex-basis:   flex-basis 属性用于设置或检索弹性盒伸缩基准值 。

3. 作为父容器的 5 大属性 (都有 initial 、 inherit 设置)*

1. flex-direction:  决定主轴的方向 (即项目的排列方向) 。
   1. row(默认值): 主轴为水平方向, 起点在左端;
   2. row-reverse: 主轴在水平方向, 起点在右端;
   3. column: 主轴为垂直方向, 起点在上沿 。
   4. column-reverse 主轴为垂直方向, 起点在下沿; 与 column 相同, 但是以相反的顺序 。
   5. initial 关键字用于设置 CSS 属性为它的默认值; initial 关键字可用于任何 HTML 元素上的任何 CSS 属性 。
   6. inherit 从父元素继承该属性 。*

2. flex-wrap: 如果一条轴线排不下, 如何换行 。
   1. nowrap 默认: 不换行 。 当容器宽度不够时, 每个项目会被挤压宽度 。
   2. wrap 换行: 并且第一行在容器最上方 。
   3. wrap-reverse 换行: 并且第一行在容器最下方 。

3. justify-content:  定义了项目在主轴上的对齐方式 。
   1. 此属性与主轴方向息息相关 。
   2. 主轴方向为: row-起点在左边, row-reverse-起点在右边, column-起点在上边, column-reverse-起点在下边
      1. flex-start (默认值): 项目位于主轴起点 。
      2. flex-end: 项目位于主轴终点 。
      3. center: 居中*
      4. space-between: 两端对齐, 项目之间的间隔都相等 (开头和最后的项目, 与父容器边缘没有间隔) 。
      5. space-around: 每个项目两侧的间隔相等 。 所以, 项目之间的间隔比项目与边框的间隔大一倍 (开头和最后的项目, 与父容器边缘有一定的间隔) 。

4. align-items: 定义项目在交叉轴上如何对齐 。
   1. stretch 默认值: 如果项目 未设置高度 或 设为 auto, 将占满整个容器的高度 。*
   2. flex-start: 交叉轴的起点对齐 。
   3. flex-end: 交叉轴的终点对齐 。
   4. center: 交叉轴的中点对齐 。
   5. baseline: 项目的第一行文字的基线对齐 (文字的行高、字体大小会影响每行的基线) 。

5. align-content: 定义了多根轴线的对齐方式 。 如果项目只有一根轴线, 该属性不起作用 (当项目换为多行时, 可使用 align-content 取代 align-items) 。
   1. stretch(默认值): 轴线占满整个交叉轴 。
   2. flex-start: 与交叉轴的起点对齐 。
   3. flex-end: 与交叉轴的终点对齐 。
   4. center: 与交叉轴的中点对齐 。
   5. space-between: 与交叉轴两端对齐, 轴线之间的间隔平均分布 。
   6. space-around: 每根轴线两侧的间隔都相等。 所以, 轴线之间的间隔比轴线与边框的间隔大一倍 。
   

4. 作用于子项目的 6 大属性

1. order: 定义项目的排列顺序 。 数值越小, 排列越靠前, 默认为 0 。
2. flex-grow: 定义项目的放大比例, 默认为 0, 即如果存在剩余空间, 也不放大 。
3. flex-shrink: 定义了项目的缩小比例, 默认为 1, 即如果空间不足, 该项目将缩小 。
4. flex-basis: 定义项目占据的主轴空间 。 (如果主轴为水平, 则设置这个属性, 相当于设置项目的宽度, 原 width 将会失效)*
5. flex: 是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto 后两个属性可选 。
6. align-self: 定义单个项目自身在交叉轴上的排列方式, 可以覆盖掉容器上的 align-items 属性 。

5. flex中的缩写拓展:

1. flex-flow 为 flex-direction 与 flex-wrap 的缩写 。

2. 默认为: flex-flow: row wrap;*

3. 各个属性的基本介绍:*
   1. Flex-direction: 调整主轴方向（默认为水平方向）包括 row、row-reverse、column、column-reverse*
      1. row: 默认值。 作为一行, 水平地显示弹性项目 。
      2. row-reverse: 等同行, 但方向相反 。
      3. column: 作为列, 垂直地显示弹性项目 。
      4. column-reverse: 等同列, 但方向相反 。

   2. flex-wrap: flex-wrap 属性规定弹性项目是否应换行 。 nowrap、 wrap、 wrap-reverse*
      1. nowrap: 默认值。 规定弹性项目不会换行 。
      2. wrap: 规定弹性项目会在需要时换行 。
      3. wrap-reverse: 规定弹性项目会在需要时换行, 以反方向 。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。