間距

​基本用法

​在子元素之間加入水平間距

使用 space-x-{amount} 工具程式控制元素之間的水平間距。

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​在子元素之間加入垂直間距

使用 space-y-{amount} 輔助工具控制元素之間的垂直空間。

<div class="flex flex-col space-y-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​反轉子項目順序

如果你的元素順序是反的（例如使用 flex-row-reverse 或 flex-col-reverse），請使用 space-x-reverse 或 space-y-reverse 輔助工具，以確保空間新增到每個元素的正確側邊。

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​使用負值

若要使用負空間值，請在類別名稱前加上連字號，將其轉換為負值。

<div class="flex -space-x-4 ...">
  <!-- ... -->
</div>

​限制

這些輔助工具實際上只是新增邊距到群組中所有項目（第一個項目除外）的捷徑，並不設計用於處理複雜的情況，例如網格、會換行的版面，或子項目以複雜的自訂順序呈現，而非其自然 DOM 順序的情況。

對於這些情況，如果可行，最好使用 間距工具程式，或在每個元素中加入外框距，並在父元素中加入相應的負外框距

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

​無法與區隔工具程式配對

space-* 工具程式並非設計為與 區隔工具程式 搭配使用。對於這些情況，請考慮改為在子元素中加入外框距/內距工具程式。

​有條件地套用

​游標移入、焦點及其他狀態

Tailwind 讓你可以使用變異修飾詞，在不同的狀態中，有條件地套用工具程式類別。例如，使用 hover:space-x-8 來僅在游標移入時套用 space-x-8 工具程式。

<div class="flex space-x-2 hover:space-x-8">
  <!-- ... -->
</div>

如需所有可用狀態修飾詞的完整清單，請查看 游標移入、焦點及其他狀態 文件。

​斷點和媒體查詢

您也可以使用變異修改器來針對媒體查詢，例如回應式斷點、暗色模式、偏好減少動作等。例如，使用 md:space-x-8 僅在中型螢幕大小及以上套用 space-x-8 實用程式。

<div class="flex space-x-2 md:space-x-8">
  <!-- ... -->
</div>

若要深入了解，請查看關於 回應式設計、 暗色模式 和 其他媒體查詢修改器 的文件。

​使用自訂值

​自訂您的主題

預設情況下，Tailwind 的間距比例使用 預設間距比例。您可以透過編輯 tailwind.config.js 檔案中的 theme.spacing 或 theme.extend.spacing 來自訂間距比例。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

或者，您也可以透過編輯 tailwind.config.js 檔案中的 theme.space 或 theme.extend.space 來自訂間距比例。

module.exports = {
  theme: {
    extend: {
      space: {
        '5px': '5px',
      }
    }
  }
}

在 主題自訂 文件中，深入了解如何自訂預設主題。

​任意值

如果您需要使用一次性的 space-{x|y} 值，而這在您的主題中沒有意義，請使用方括號使用任何任意值即時產生屬性。

<div class="space-y-[5px]">
  <!-- ... -->
</div>

在 任意值 文件中，深入了解任意值支援。