flex 布局允许子元素在容器内沿一个方向排列

flex 布局（Flexible Box 布局）是一种 CSS 的一维布局模型，它允许子元素在容器内沿一个方向排列，无论是水平还是垂直方向。flex 布局旨在为复杂的布局提供更大的灵活性，使元素能够在不同的屏幕尺寸和不同大小的容器中自动调整大小和分布空间。

flex 布局的组成

flex 容器（flex container） ：被设置为 flex 布局的元素称为 flex 容器，它是布局的外层容器，用于控制子元素的布局方式。可以通过将 display 属性设置为 flex（水平方向）或 inline-flex（内联水平方向）来创建一个 flex 容器。
flex 项目（flex item） ：flex 容器中的每个直接子元素都是一个 flex 项目，它们会根据 flex 容器的布局规则进行排列。

flex 布局的主要特点

灵活性 ：flex 布局可以根据容器的大小和可用空间自动调整项目之间的间距和大小。这使得它在响应式设计中特别有用，能够根据不同屏幕尺寸和设备提供一致的布局体验。
方向控制 ：可以指定项目沿水平方向（主轴）或垂直方向（交叉轴）排列，并且还可以控制项目在主轴和交叉轴上的对齐方式。例如，可以使用 flex-direction 属性来设置主轴的方向为行方向（row 或 row-reverse）或列方向（column 或 column-reverse）。
空间分配 ：通过 justify-content 属性，可以控制项目在主轴上的对齐方式，例如两端对齐、居中对齐、平均分布等。通过 align-items 属性，可以控制项目在交叉轴上的对齐方式，例如顶部对齐、居中对齐、拉伸对齐等。
项目大小控制 ：可以使用 flex-grow、flex-shrink 和 flex-basis 属性来定义项目的大小和伸缩比例。这些属性允许项目在容器中按比例增长或缩小，以适应可用空间。

常见属性

flex 容器属性 ：
- display ：将元素设置为 flex 容器，常见的值有 flex 和 inline-flex。
- flex-direction ：定义主轴的方向，决定项目如何排列。取值为 row（默认值，水平排列）、row-reverse（水平反向排列）、column（垂直排列，上下方向）、column-reverse（垂直反向排列）。
- justify-content ：定义项目在主轴上的对齐方式。常见的取值有 flex-start（默认值，项目头部对齐）、center（项目居中对齐）、flex-end（项目尾部对齐）、space-between（项目两端对齐，项目之间的间隔相等）、space-around（项目均匀分布，项目两边的间隔是项目之间的间隔的一半）等。
- ```
<div flex items-center justify-center>
```
- ```
<div flex items-center justify-between>
```
- align-items ：定义项目在交叉轴上的对齐方式。取值有 stretch（默认值，项目拉伸以占据整个交叉轴可用空间）、flex-start（项目在交叉轴起点对齐）、center（项目在交叉轴居中对齐）、flex-end（项目在交叉轴终点对齐）、baseline（项目以基线对齐）等。
- flex-wrap ：定义项目是否可以换行。取值为 nowrap（默认值，不允许换行）、wrap（允许换行，多余项目换到下一行）、wrap-reverse（允许换行，并且换行方向与 wrap 相反）。
flex 项目属性 ：
- flex-grow ：定义项目在容器中有额外空间时的拉伸比例。默认值为 0，表示不拉伸。例如，如果容器中有两个项目，一个的 flex-grow 值为 1，另一个为 2，当容器有剩余空间时，第二个项目会比第一个项目多分配一倍的剩余空间。
- flex-shrink ：定义项目在容器空间不足时的缩小比例。默认值为 1，表示项目可以收缩。如果项目不能收缩，可以将其设置为 0。
- flex-basis ：定义项目在容器中的初始大小（在主轴上）。可以是一个具体的值（如像素值、百分比等），也可以是 auto（默认值，项目的大小由其内容决定）。
- order ：定义项目的排列顺序。默认值为 0，数值较小的项目会先排列，这样可以不改变 HTML 结构的情况下调整项目的显示顺序。

flex 布局的应用场景

水平或垂直居中元素 ：可以轻松地将一个元素在父容器中水平和垂直居中显示，只需要将父容器设置为 flex 容器，并使用 justify-content 和 align-items 属性设置为 center 即可。
等宽等高布局 ：通过设置 flex-basis 和 flex-grow 等属性，可以轻松创建等宽或等高的布局，而无需使用复杂的 hack 方法。
响应式布局 ：根据屏幕尺寸的变化，自动调整项目的大小和排版，以适应不同的设备。例如，在小屏幕上可以将项目从水平排列改为垂直排列，或者改变项目的大小和间距。
多列布局 ：当项目数量较多时，flex 布局可以方便地创建多列布局，并且可以根据屏幕空间自动调整列数。通过 flex-wrap 属性可以实现项目的自动换行。