什么是Flex布局

Flex布局是一種基于盒子模型的布局方式，它讓我們可以輕松地控制容器內的元素在主軸和交叉軸上的排列方式。通過設置不同的Flex屬性，我們可以實現各種不同的布局效果，從簡單的居中對齊到復雜的多列布局。

如何開始使用Flex布局

首先，我們需要將容器設置為Flex容器。在CSS中，只需將容器的 display 屬性設置為 flex 即可：

.container {display: flex;
}

這樣，容器內的子元素就可以使用Flex布局了。

Flex容器的屬性

Flex布局提供了一系列屬性來控制Flex容器內子元素的排列方式。
以下是一些常用的Flex容器屬性：

• justify-content：控制子元素在主軸上的對齊方式，可以實現居中、起始對齊、末尾對齊等效果。
• align-items：控制子元素在交叉軸上的對齊方式，可以實現居中、起始對齊、末尾對齊等效果。
• flex-direction：控制主軸的方向，可以是水平方向（row）或垂直方向（column）。
• flex-wrap：控制子元素是否換行。
• align-content：多行布局時，控制行與行之間的對齊方式。

Flex項目的屬性

除了Flex容器屬性之外，Flex項目（即容器內的子元素）也有一些屬性可供使用：

• flex-grow：定義項目的放大比例。
• flex-shrink：定義項目的縮小比例。
• flex-basis：定義項目在分配多余空間之前的基準大小。
• order：定義項目的排列順序。

舉個例子

讓我們通過一個簡單的示例來演示Flex布局的應用。假設我們有一個容器，里面有三個項目，我們希望它們水平居中顯示并且在主軸上均勻分布。我們可以這樣做：

.container {display: flex;justify-content: center;
}.item {flex: 1;
}

通過將容器的 display 屬性設置為 flex，并設置 justify-content: center;，我們將項目水平居中對齊。而通過給項目設置 flex: 1;，我們讓它們在主軸上均勻分布。