CSS中的Flex布局用來實現頁面布局非常方便，使用簡單易懂，適用于響應式網頁和移動端頁面的開發。

Flex布局通過在容器元素中設置display: flex屬性，及相關的伸縮屬性來控制元素的排列方式和對齊方式。

.container {
display: flex; /* 開啟 Flex 布局 */
flex-direction: row; /* 主軸方向（水平方向為 row，垂直方向為 column） */
justify-content: space-between; /* 主軸對齊方式 */
align-items: center; /* 側軸對齊方式 */
}

在容器元素中設置了以上屬性后，子元素的排列方式就會被改變。例如：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
}
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>

以上代碼的三個item元素，將會按照水平方向（row）排列，與父容器的對齊方式是space-between，即兩端對齊。而align-items屬性設置了是在垂直方向上的對齊方式為居中。

通過設置不同的主軸方向、對齊方式、子元素排列方式等，可以輕松實現各種不同的頁面布局效果。