彈性盒布局是一種比較新的 CSS 布局方式，它的好處在于可以輕松地實(shí)現(xiàn)多種布局，并且避免出現(xiàn)空隙。在傳統(tǒng)的布局方式中，經(jīng)常會(huì)出現(xiàn)元素之間的空隙，這是因?yàn)樵氐拇笮『臀恢枚际怯伤鼈冏陨頉Q定的。而使用彈性盒布局，則可以讓容器自適應(yīng)父元素的大小，同時(shí)確保元素之間不會(huì)出現(xiàn)空隙。

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1 1 200px;
}

以上代碼演示了一個(gè)典型的彈性盒布局示例。首先，我們需要在容器上設(shè)置display: flex;屬性，這樣容器就成為了一個(gè)彈性盒。接著，我們使用flex-wrap: wrap;屬性，讓元素能夠自動(dòng)換行。通過設(shè)置justify-content: space-between;屬性，我們讓容器中元素之間的間距保持平均分布，并且容器與父元素之間沒有多余的空隙。最后，使用align-items: center;屬性，可以讓元素垂直居中對(duì)齊。

另外，還需要注意的一點(diǎn)是，彈性盒布局中的元素需要設(shè)置flex: 1 1 200px;屬性才能正確地布局。其中，flex: 1;表示元素的填充比例為 1，即與其他元素平分可用空間；flex: 1 1;中的第二個(gè)1則表示元素的最小尺寸為當(dāng)前寬度，這樣可以避免出現(xiàn)空隙；最后的200px則是元素的最大寬度，讓元素可以適應(yīng)容器的大小。