Align 對齊

決定子層在垂直於排列方向上的位置。

用法

<div sl-wrap sl-align="end">一排往下對齊</div>
<div sl-stack sl-align="center">整疊水平置中</div>
<div sl-stack>
  <div>靠左</div>
  <div sl-align="end">只有這個靠右</div>
</div>

寫在容器上時套用於全部子層；寫在子層時，僅覆寫該項。

原始碼

<div sl-wrap>
  <div style="min-height:1.5rem">a</div>
  <div style="min-height:3rem">b</div>
  <div style="min-height:2rem">c</div>
</div>

sl-align-startcenterendstretch交錯軸對齊

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

選項

選項	效果
start	對齊方向的起點
center	置中
end	對齊方向的終點
stretch	子層填滿該方向

對齊方向隨排列軸而定。sl-wrap 為垂直方向（上中下），sl-stack 為水平方向（左中右），sl-grid 為格子內的垂直位置。

sl-wrap 子層的垂直位置：

原始碼

<div sl-wrap sl-align="start">
  <div style="min-height:1.5rem">a</div>
  <div style="min-height:3rem">b</div>
  <div style="min-height:2rem">c</div>
</div>
<div sl-wrap sl-align="center">
  <div style="min-height:1.5rem">a</div>
  <div style="min-height:3rem">b</div>
  <div style="min-height:2rem">c</div>
</div>
<div sl-wrap sl-align="end">
  <div style="min-height:1.5rem">a</div>
  <div style="min-height:3rem">b</div>
  <div style="min-height:2rem">c</div>
</div>
<div sl-wrap sl-align="stretch">
  <div style="min-height:1.5rem">a</div>
  <div style="min-height:3rem">b</div>
  <div style="min-height:2rem">c</div>
</div>

sl-stack 子層的水平位置：

原始碼

<div sl-stack sl-align="start">
  <div>短</div>
  <div>比較長的項目</div>
</div>
<div sl-stack sl-align="center">
  <div>短</div>
  <div>比較長的項目</div>
</div>
<div sl-stack sl-align="end">
  <div>短</div>
  <div>比較長的項目</div>
</div>

標在子層時，僅該項離開共同對齊：

原始碼

<div sl-stack>
  <div>與容器同寬（預設）</div>
  <div sl-align="end">只有這項靠右</div>
  <div>與容器同寬（預設）</div>
</div>

sl-grid 的子層同樣適用。sl-align 控制格子內的垂直位置，sl-justify 控制水平位置，兩者並用即完成格子內的定位。

適用元件

元件	作用	未標示時
sl-wrap	子層在列內的垂直位置	center
sl-stack	子層的水平位置	stretch
sl-grid	格子內元素的垂直位置	stretch
sl-float	區塊內元素的水平位置	stretch

容器上的 sl-align 不會傳入巢狀的排版元件，各元件仍套用自己的預設值。沿排列方向的分佈見 sl-justify。