flex布局介绍

Flex布局（Flexible Box Layout）是一种新的布局方式，旨在提供更加高效的方法来对容器中的子元素进行排列、对齐和分配空间。Flex布局允许容器内的子元素能够自动调整其大小，以填充可用空间，从而适应不同的屏幕尺寸和设备方向。

下面是Flex布局的一些关键概念和用法：

1. 容器属性（Flex Container Properties）

• display: 用于定义一个容器为Flex容器。例如，display: flex;会将一个元素声明为Flex容器。
• flex-direction: 定义主轴的方向。主轴可以是水平的（row），也可以是垂直的（column）。
• justify-content: 定义了沿主轴方向上如何对齐子元素。可以是flex-start, flex-end, center, space-between, space-around等。
• align-items: 定义了沿交叉轴方向上如何对齐子元素。可以是flex-start, flex-end, center, stretch, baseline等。
• flex-wrap: 定义了子元素是否可以换行。可以是nowrap, wrap, wrap-reverse。
• align-content: 当子元素在交叉轴上有空间可分配时，定义了各行（或列）的对齐方式。可以是flex-start, flex-end, center, stretch, space-between, space-around等。

2. 子元素属性（Flex Item Properties）

• order: 定义了子元素的排列顺序。
• flex-grow: 定义了子元素相对于其他子元素在可用空间中的增长比例。
• flex-shrink: 定义了子元素相对于其他子元素在空间不足时的收缩比例。
• flex-basis: 定义了子元素在分配多余空间之前的基础大小。
• flex: 是flex-grow, flex-shrink, flex-basis三个属性的缩写形式。
• align-self: 用于覆盖容器的align-items属性，定义了单个子元素在交叉轴上的对齐方式。

3. 实例演示

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
  margin: 10px;
}

在这个示例中，.container被定义为一个Flex容器，其子元素.item具有相同的flex属性值，表示它们会平均地填充可用空间。容器的主轴方向是水平的（row），子元素在主轴上居中对齐，交叉轴上也是居中对齐。

Flex布局是一种强大且灵活的布局模型，能够简化页面布局的实现，并提供了更多的控制和适应性，特别适用于响应式设计和移动端开发。