Flex布局

Flex介绍

1.概念

Flex 弹性盒子是一种 CSS 布局模型，用于设计灵活的、可自适应的布局结构。通过 Flex 布局，你可以轻松地创建水平或垂直方向的布局，使内容在容器中动态地适应空间。

主要概念：

1. 容器（Flex Container）：
    包含了 Flex 项目的父元素。通过设置容器的属性，来控制内部 Flex 项目的排列方式。

2. 项目（Flex Item）：
    容器内的子元素。这些元素根据容器的设置，灵活地调整其在容器中的位置和尺寸。

2.Flex容器属性

1. display：
    定义一个块级容器为 Flex 容器。将其设置为 display: flex; 或 display: inline-flex;。

2. flex-direction：
    控制容器的排列方向，可以是水平方向（row）、垂直方向（column）或其对应的反向。

3. justify-content：
    控制主轴上的对齐方式，可以是居中、起始对齐、末尾对齐等。

4. align-items：
    侧轴只有单行时，控制单行在侧轴上的对齐方式，可以是居中、起始对齐、末尾对齐等。

5. align-content：
    侧轴存在多行或多列时，控制各行（或列）在侧轴上的对齐方式，可以是居中、起始对齐、末尾对齐等。

6. flex-wrap：
    控制 Flex 项目是否换行，可以是不换行（nowrap）、自动换行（wrap）、换行后进行排列等。

3.Flex项目属性

1. order：
    定义 Flex 项目的排列顺序，可以调整项目在容器中的位置。

2. flex-grow：
    定义 Flex 项目在剩余空间中的放大比例，可以控制项目在容器中的相对大小。

3. flex-shrink：
    定义 Flex 项目在空间不足时的缩小比例，可以控制项目在容器中的相对大小。

4. flex-basis：
    定义 Flex 项目在没有设置宽度或高度时，占据的主轴空间。

5. flex：
    是 flex-grow、flex-shrink 和 flex-basis 的缩写，方便同时设置这三个属性。

4.优势

灵活性：Flex 布局适应各种屏幕尺寸和设备方向，适用于响应式设计。
自适应性：Flex 项目可以根据可用空间自动调整大小，适应不同内容和尺寸的容器。
简洁性：相比传统的 CSS 布局方法，Flex 布局的代码通常更简洁易读。