彈性盒布局是一種基于 Flexbox 模型的布局方式。它通過將容器的大小調(diào)整為與子元素的大小相匹配，從而實現(xiàn)動態(tài)布局。在使用彈性盒布局時，最重要的是定義容器的 display 屬性為 flex。

.container {
display: flex;
}

這樣一來，子元素就可以按照一定規(guī)則對齊和排列。例如，默認情況下，通過設(shè)置 justify-content 和 align-items 屬性可以使子元素在容器中水平和垂直居中。

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

彈性盒布局也支持在容器中對子元素進行排序和重排。甚至還可以使用 flex 定義子元素的大小和相對位置。下面是一個例子，其中我們將三個容器從左到右按列平鋪布置。

.container {
display: flex;
}
.item {
flex: 1;
height: 50px;
}
.item-1 {
background-color: red;
}
.item-2 {
background-color: blue;
}
.item-3 {
background-color: green;
}

在這個例子中，我們首先定義容器的 display 屬性為 flex。接著，我們用 .item 類給每個子元素定義了一些樣式屬性，例如 flex、height 和 background-color。最后，我們將三個 .item 元素嵌套在 .container 元素中，從而實現(xiàn)了一個完美的彈性盒布局。

總的來說，彈性盒布局是一種非常靈活和強大的布局方式。它可以幫助開發(fā)人員輕松創(chuàng)建可伸縮和響應(yīng)式的網(wǎng)頁布局，并且還提供了許多額外的優(yōu)勢，例如可定制的尺寸和位置調(diào)整等功能。在今天的前端開發(fā)中，彈性盒布局已成為一個必備的技能。