CSS3彈性布局是一種能夠幫助我們更優雅地進行頁面布局的技術。相比傳統的布局方式，它具有很多優勢，例如它能夠輕松實現響應式布局、適應不同的屏幕大小以及實現間距等等。在這篇文章中，我們重點講解CSS3彈性布局中如何實現間距的效果。

在CSS3彈性布局中，間距是通過使用justify-content和align-items這兩個屬性來實現的。保留一定的空隙，能夠使頁面更具有空氣感，也更加美觀。下面我們進入代碼演示環節，看看如何實現彈性布局的間距效果。

.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
}

在這段代碼中，我們首先創建了一個.container容器，并使用了display:flex;將其轉換成彈性容器。接著通過justify-content:space-between;設置彈性容器中子元素之間的間隔。最后，我們使用align-items:center;將子元素在豎直方向上居中對齊。我們將彈性容器中的每個元素都設置為寬高均為100px的.box，這樣就創建了一個簡單的間距樣式。

需要注意的是，當彈性容器中僅有一個子元素時，設置justify-content:space-between;將不會起作用，此時我們需要使用屬性margin來讓子元素之間產生一定的距離。

使用CSS3彈性布局，可以快速而優雅地實現頁面布局。學習彈性布局，理解如何使用它的間距效果，將幫助你更好地掌握這項技術。希望這篇文章對你有所幫助，謝謝閱讀！