CSS Flex布局是前端開發中常用的一種布局方式。它可以靈活地調整元素的排列方式、寬度和高度，使得Web頁面的排版更為美觀和規范。下面介紹Flex布局中常見的幾種布局方式：

.container {
display: flex; /* 容器使用Flex布局 */
}
.item {
flex: 1; /* 項目自動分配寬度 */
}
.item-1 {
flex: 2; /* 項目分配寬度為2 */
}
.item-2 {
flex: 3; /* 項目分配寬度為3 */
}

1. Flex布局常用屬性

.container {
display: flex; /* 容器使用Flex布局 */
flex-direction: row; /* 設置主軸為水平方向 */
justify-content: center; /* 項目在主軸上居中 */
align-items: center; /* 項目在交叉軸上居中 */
flex-wrap: wrap; /* 自動換行 */
}

2. 水平居中和垂直居中

.container {
display: flex; /* 容器使用Flex布局 */
justify-content: center; /* 使得容器內元素水平居中 */
align-items: center; /* 使得容器內元素垂直居中 */
}

3. 等分布局方式

.container {
display: flex; /* 容器使用Flex布局 */
}
.item {
flex: 1; /* 項目自動分配寬度 */
}

4. 左中右布局方式

.container {
display: flex; /* 容器使用Flex布局 */
}
.left {
flex: 1; /* 左側元素自適應寬度 */
}
.center {
width: 200px; /* 中間元素固定寬度 */
margin: 0 auto; /* 水平居中 */
}
.right {
flex: 1; /* 右側元素自適應寬度 */
}

總之，使用Flex布局可以使得Web頁面的排版更為靈活和美觀，加深用戶的視覺體驗，使得開發工作更加高效和方便。