彈性布局（Flexbox）是 CSS3 新增的一種布局方式，其優點在于可以輕松地為不同設備和屏幕尺寸創建靈活的布局。Flexbox 的思想是將容器分為主軸和交叉軸兩個方向，使其內部元素可以按照設定的規則排列。

.container {
display: flex;
justify-content: center;
align-items: center;
}

上面的代碼演示了一個基本的 Flexbox 容器，其中 display 屬性設置為 flex，這是 flex 布局的關鍵。justify-content 和 align-items 屬性則用于設置主軸和交叉軸的對齊方式。

在 flex 布局中，任何一個元素都可以成為容器，只需要將其 display 屬性設置為 flex。同時，容器內部的元素也可以設置不同的 flex 屬性來控制其大小和位置。

.item {
flex: 1;
margin: 10px;
}

上述代碼為一個元素設置了 flex 屬性為 1，這意味著它會占據所有可用空間。同時，通過設置 margin 屬性為 10px，這個元素與其他元素之間會保留一定的間距。

總體來說，Flexbox 是一種靈活、強大且易于使用的布局方式，便于創建多設備和多屏幕下的響應式網站設計。我們可以通過熟練掌握它的屬性和方法，打造出更優秀的網站布局。