基本概念

• Flex容器（Flex Container）：通过在其上设置display: flex;或display: inline-flex;声明的元素，用于创建flex布局环境。

• Flex项目（Flex Item）：Flex容器的直接子元素自动成为flex项目。

• 主轴（Main Axis）：Flex项目沿着主轴排列，主轴的方向由flex-direction属性决定，默认为水平方向。

• 交叉轴（Cross Axis）：与主轴垂直的轴称为交叉轴，flex项目在交叉轴上的对齐方式由align-items、align-self等属性决定。

2、容器属性

1. flex-direction

• 决定了主轴的方向，即项目的排列方向。

• 可选值：row（默认值，主轴为水平方向，起点在左）、row-reverse（主轴为水平方向，起点在右）、column（主轴为垂直方向，起点在上）、column-reverse（主轴为垂直方向，起点在下）。

1. flex-wrap

• 定义了flex项目是否换行。

• 可选值：nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。

1. flex-flow

• flex-direction和flex-wrap的简写形式，默认值为row nowrap。

1. justify-content

• 定义了项目在主轴上的对齐方式。

• 可选值：flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，项目之间的间隔都相等）、space-around（每个项目两侧的间隔相等）、space-evenly（项目之间的间隔相等，包括两端的间隔）。

1. align-items

• 定义了项目在交叉轴上的对齐方式。

• 可选值：stretch（默认值，占满整个容器的高度）、flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、center（交叉轴的中点对齐）、baseline（项目的第一行文字的基线对齐）。

1. align-content

• 定义了多根轴线时的对齐方式，只有当有多行元素时才会生效。

• 可选值：stretch（默认值，轴线占满整个交叉轴）、flex-start、flex-end、center、space-between、space-around。

3、项目属性

1. order

• 定义项目的排列顺序，数值越小，排列越靠前，默认为0。

1. flex-grow

• 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

1. flex-shrink

• 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

1. flex-basis

• 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

1. flex

• 是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。该属性用于快速设置flex项目在主轴上的占比、缩小比例和初始大小。

1. align-self

• 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

• 可选值与align-items相同。

4、使用场景

Flex弹性布局非常适合用于屏幕尺寸自适应、响应式布局、等高的多列布局、水平和垂直居中、等间距的分布等场景。

通过掌握上述Flex弹性布局的知识要点，可以更加灵活和高效地实现各种复杂的布局需求。