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等，以進一步控制布局的方式和行為。
--連續因子)
