作為Flexbox的新手(盡管在CSS方面很有經(jīng)驗(yàn))，在我看來，我讀過的大多數(shù)教程都很容易“忽略”的一件事就是flex項(xiàng)目之間的間距。

例如，被引用最多的教程之一是CSS Tricks。

這很好，也很有幫助，像這樣的圖表讓我很困惑:

請注意彈性項(xiàng)目之間的空間。雖然沒有在任何地方提到，也沒有在示例代碼中提到，但似乎獲得空格的唯一方法是使用css邊距。

沒錯(cuò)，還是我漏掉了什么重要的東西？

因?yàn)槲倚枰獎?chuàng)建的是這個(gè)，很像上面的“中心”演示:

然而，當(dāng)我自己嘗試時(shí)，我當(dāng)然會得到這樣的結(jié)果:

如果我用空格，我會得到這個(gè)。巨大的空間。

因此，看起來我需要給前兩個(gè)框增加右邊距，以得到三個(gè)中間有小間隙的框。

對于Flexbox來說，這僅僅是一個(gè)糟糕的用例嗎？因?yàn)槲铱床怀鲇肍lexbox創(chuàng)建3個(gè)盒子比使用簡單的邊距和居中有什么優(yōu)勢。

我錯(cuò)過了什么明顯的東西嗎？

不-你沒有錯(cuò)過任何東西。Flexbox非常適合對元素進(jìn)行排序，并定義這些元素沿主軸或橫軸的一般對齊方式，但它并不直接涉及單個(gè)項(xiàng)目的間距。如果您看一看Flexbox文章中使用的代碼筆，您會注意到它們使用:

margin-top: 10px

定義元素間距。希望這有所幫助！

.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<div class='container'>
  <div class='rope'>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS規(guī)范最近進(jìn)行了更新，除了CSS網(wǎng)格元素之外，還將間隙屬性應(yīng)用于flexbox元素。所有主流瀏覽器的最新版本都支持該功能。有了gap屬性，你可以用column-gap: 10px(或者任何你想要的大小)得到你想要的東西。