CSS是前端開發中重要的一環，它可以實現頁面的各種各樣的效果。在CSS中，我們經常需要對元素進行布局，比如讓元素從左右排列變為上下排列。
如何實現這樣的布局呢？其實很簡單，我們只需要利用CSS的
display屬性來實現就可以了。
.left{
display: inline-block; /* 將左側的元素設置為行內塊元素 */
vertical-align: top; /* 將左側的元素垂直對齊到頂部 */
}
.right{
display: inline-block; /* 將右側的元素設置為行內塊元素 */
vertical-align: top; /* 將右側的元素垂直對齊到頂部 */
}以上代碼實現了將左右排列的元素變成上下排列的效果。我們只需要給左右兩個元素添加相應的class，就可以實現這一布局。
而如果我們需要在響應式頁面中實現上下排列變成左右排列的布局呢？也很簡單，只需要使用
flex布局。
.container{
display: flex;
flex-direction: row; /* 將元素排列方向改為水平排列 */
justify-content: space-between; /* 隨著窗口大小變化，元素之間的距離保持不變 */
flex-wrap: wrap; /* 當容器寬度不足以容納所有元素時，自動換行 */
}
.item{
flex-basis: 45%; /* 指定元素占據主軸上的空間百分比 */
}以上代碼實現了響應式布局的效果，當容器寬度不足以容納所有元素時，會自動將元素換行，并排布到上下兩行中。
CSS的布局功能非常強大，只要我們熟練掌握各種布局技巧，就可以輕松實現各種效果！