CSS3的布局方法 CSS3是最新的CSS標準，它為開發者提供了一系列全新的高級布局方法。下面我們將了解其中幾種。 1. 彈性盒子布局（Flexbox） 彈性盒子布局是一種自適應布局，可以指定容器的方向、對齊方式和自適應規則，從而實現柔性的布局。示例代碼如下：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

2. 網格布局（Grid） 網格布局是一種雙向布局，可以在行和列上定義網格線，然后將內容放入單元格中。使用網格布局，我們可以更加方便地實現復雜的布局需求。示例代碼如下：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
gap: 10px;
}

3. 多列布局（Multi-column） 多列布局是一種將內容分成多個列的布局方式，可以提高頁面的可讀性和視覺效果。在使用多列布局時，我們可以指定列數、列間距和列寬等屬性。示例代碼如下：

.container {
column-count: 3;
column-gap: 20px;
column-width: 200px;
}

4. 流式布局（Fluid） 流式布局是一種根據視口寬度自適應的布局方式，可以讓頁面適應不同的設備屏幕大小。使用流式布局，我們可以指定元素的寬度為百分比或max-width屬性，從而實現自適應布局。示例代碼如下：

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.box {
width: 30%;
max-width: 300px;
float: left;
margin-right: 3%;
}

總結 以上是CSS3中幾種常用的布局方式，它們各有優點，可以根據不同的頁面需求靈活運用。在實現復雜布局時，我們可以結合使用多種布局方式，從而創造出更加完美的頁面布局效果。