Flex布局

lex布局（Flexible Box Layout），也被称为弹性盒子布局，是一种CSS3引入的布局模式，旨在提供一种更加有效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小未知或是动态变化的。Flex布局的主要目的是为盒状模型提供最佳的灵活性。

Flex布局的基本概念

1. Flex容器（Flex Container）：采用Flex布局的元素。所有子元素的显示方式将遵循Flex布局的规则。可以通过设置display: flex;或display: inline-flex;来定义Flex容器。

2. Flex项目（Flex Item）：Flex容器的子元素。Flex项目默认会沿着主轴（main axis）排列，但可以通过设置flex-direction来改变主轴的方向。

3. 主轴（Main Axis）：Flex项目排列的轴线。可以通过flex-direction属性来改变主轴的方向（水平或垂直）。

4. 交叉轴（Cross Axis）：与主轴垂直的轴。

Flex容器的属性

• flex-direction：决定主轴的方向（row, row-reverse, column, column-reverse）。
• flex-wrap：决定Flex项目是否换行（nowrap, wrap, wrap-reverse）。
• flex-flow：flex-direction和flex-wrap的简写形式。
• justify-content：定义了项目在主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, space-evenly）。
• align-items：定义了项目在交叉轴上的对齐方式（flex-start, flex-end, center, baseline, stretch）。
• align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用（flex-start, flex-end, center, space-between, space-around, stretch）。

Flex项目的属性

• order：定义项目的排列顺序，数值越小，排列越靠前，默认为0。
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来大小。
• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

使用场景

Flex布局非常适用于页面中的复杂布局，特别是当页面需要适应不同屏幕大小和方向时。它可以轻松处理元素的排列、对齐和分布，使得响应式布局更加简单和高效。