Flex布局是一种用于创建灵活且自适应的布局模型，它使得元素能够更好地响应不同的屏幕尺寸和设备。Flex布局基于容器和项目的概念，通过设置容器的属性来控制项目的布局和对齐方式。
Flex布局的关键概念包括：
-
父容器（Flex容器）：使用
display: flex或display: inline-flex将一个元素声明为父容器，即Flex容器。该容器的子元素将按照Flex布局进行排列。 -
子项目（Flex项目）：Flex容器的直接子元素被称为Flex项目。每个项目都有自己的大小和位置，它们的布局可以通过设置Flex容器的属性来控制。
-
主轴和交叉轴：Flex容器具有主轴和交叉轴两个方向。主轴是Flex项目的排列方向，可以是水平方向（从左到右）或垂直方向（从上到下）。交叉轴是与主轴垂直的方向。
-
主轴对齐（主轴上的对齐方式）：控制Flex项目在主轴上的对齐方式，例如居中对齐、左对齐、右对齐等。
-
交叉轴对齐（交叉轴上的对齐方式）：控制Flex项目在交叉轴上的对齐方式，例如居中对齐、顶部对齐、底部对齐等。
下面是一个简单的示例，演示了如何使用Flex布局：
<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>
.container {display: flex;justify-content: space-between;align-items: center;
}.item {flex: 1;height: 100px;background-color: #f2f2f2;margin: 10px;
}
在上述示例中，我们创建了一个Flex容器，并将其子元素设置为Flex项目。通过设置.container类的CSS属性，我们实现了以下效果：
display: flex：将.container元素声明为Flex容器。justify-content: space-between：在主轴上将Flex项目均匀分布，使它们之间的间距相等。align-items: center：在交叉轴上将Flex项目居中对齐。
每个.item元素都具有flex: 1属性，表示它们会平均占用剩余的空间，因此它们的宽度将自动调整以填充剩余空间。
通过使用Flex布局，我们可以轻松地实现各种布局需求，如水平居中、垂直居中、等高列、自适应布局等。Flex布局还提供了其他属性和选项，例如flex-direction、flex-wrap、align-self等，以进一步控制布局的方式和行为。
--连续因子)
