Sakulime UI
v0.4.8

Justify 主軸分佈 ​

設定項目沿排列方向的位置，以及項目之間的距離分配。

用法 ​

html
<div sl-wrap sl-justify="end">一排靠右</div>
<div sl-wrap sl-justify="between">一排攤開貼兩邊</div>
<div sl-grid sl-justify="center">格子內容水平置中</div>

須寫在排版元件自身。寫於外層時，內部元件仍套用自己的預設值，外層設定不生效。

原始碼
<div sl-wrap>
  <div>項目 1</div>
  <div>項目 2</div>
  <div>項目 3</div>
</div>

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

各選項的效果：

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

選項 ​

選項分佈
start靠頭排列，sl-wrap 與 sl-stack 的預設
center置中
end靠尾排列
between首尾貼邊，剩餘空間由項目之間均分
around每個項目兩側各留一半間距
evenly間距處處相等，含兩端

between、around、evenly 僅用於分佈整排項目。標示於 sl-grid 時不生效，該值將被忽略，元素維持 stretch。

sl-justify 不繼承，與 sl-gap 相反。垂直於排列方向的對齊，見 sl-align。

適用元件 ​

各元件讀取的主軸不同：

元件作用未標示時
sl-wrap整排的水平分佈start
sl-stack整疊的垂直分佈，容器高於內容時才可見start
sl-grid每個格子內元素的水平位置stretch

sl-grid 的子層用法不同。寫在格子內元素的 sl-justify 會成為 justify-self，單獨控制該格的水平位置。

sl-wrap、sl-stack 的子層沒有對應機制，標示後不生效。