使用 gap- 設定 Item 間隔 | 點燈坊

若想在父層 Box 直接設定子層 Item 間隔，且不包含首項與末項，可使用 gap 設定。

Version

Tailwind CSS 2.0.3

gap

各子層 item 有間隔，注意 1 之前並沒有間隔，而是貼齊父層 box。

<template>
  <div class="flex gap-2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</template>

第 2 行

<div class="flex gap-2">

設定父層 box style：

• flex：設定子層 item 使用 Flexbox
• gap-2：設定各 item 間 gap

Conclusion

• gap 是設定在父層 box
• gap 雖然在 CSS spec 中可用於 Flexbox，但目前僅 Chrome、Firefox 支援，Safari 還沒有

Reference

Tailwind CSS, gap