Wrap 換行橫列

水平排列子層，寬度不足時自動換行。

用法

<div sl-wrap>
  <button sl-button>送出</button>
  <button sl-button>取消</button>
  <span sl-chip>標籤</span>
</div>

原始碼

<div sl-wrap style="max-inline-size: 22rem">
  <button sl-button>送出</button>
  <button sl-button="outline">取消</button>
  <span sl-chip>標籤</span>
  <span sl-chip>另一個標籤</span>
  <span sl-chip>比較長的標籤</span>
  <span sl-chip>更多</span>
</div>

子層垂直置中、寬度不變；總寬超過容器時，整列換到下一行。換行時機取決於內容的實際寬度，沒有固定斷點。

底層為啟用 flex-wrap 的 flexbox。與 sl-grid 的分工如下。

子層寬度依內容決定、欄數隨容器而變時用 sl-wrap；每欄等寬、欄數固定時用 sl-grid。

對齊

子層預設自起點排起。置中、靠尾或平均分散用 sl-justify，寫在 wrap 自身：

<div sl-wrap sl-justify="end">
  <button sl-button>送出</button>
  <button sl-button>取消</button>
</div>

水平分佈各選項的效果：

原始碼

<div sl-wrap style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-justify="start" style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-justify="center" style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-justify="end" style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-justify="between" style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-justify="around" style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-justify="evenly" style="width: 20rem">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>

垂直方向由 sl-align 控制。

子層預設垂直置中，start 對齊列頂、end 對齊列底。sl-align 亦可標在單一子層上，使該項離開共同對齊。

垂直對齊各選項的效果：

原始碼

<div sl-wrap>
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-align="start">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-align="center">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-align="end">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-align="stretch">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>

間距

間距由 sl-gap 給定，寫在 wrap 自身或外層皆可，預設 md。水平間距與換行後的行距為同一個值。

僅調整單一容器時，改寫 --sl-wrap-gap。

各間距的效果：

原始碼

<div sl-wrap>
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-gap="sm">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-gap="md">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>
<div sl-wrap sl-gap="lg">
  <div style="min-height: 1.5rem">項目 1</div>
  <div style="min-height: 3rem">項目 2</div>
  <div style="min-height: 2rem">項目 3</div>
</div>