實用類
直接值
將一個靜態數字傳給長度或數值屬性。
本頁目錄
類別
| 類別 | 宣告 |
|---|---|
m(<number>) | margin: calc(<number> * 1px); |
p(<number>) | padding: calc(<number> * 1px); |
gap(<number>) | gap: calc(<number> * 1px); |
w(<number>) | width: calc(<number> * 1px); |
h(<number>) | height: calc(<number> * 1px); |
r(<number>) | border-radius: calc(<number> * 1px); |
b(<number>) | border-width: calc(<number> * 1px); |
grow(<number>) | flex-grow: <number>; |
shrink(<number>) | flex-shrink: <number>; |
order(<integer>) | order: <integer>; |
其他 90 個函式
| 類別 | 宣告 |
|---|---|
mt(<number>) | margin-top: calc(<number> * 1px); |
mr(<number>) | margin-right: calc(<number> * 1px); |
mb(<number>) | margin-bottom: calc(<number> * 1px); |
ml(<number>) | margin-left: calc(<number> * 1px); |
mx(<number>) | margin-inline: calc(<number> * 1px); |
mxs(<number>) | margin-inline-start: calc(<number> * 1px); |
mxe(<number>) | margin-inline-end: calc(<number> * 1px); |
my(<number>) | margin-block: calc(<number> * 1px); |
mys(<number>) | margin-block-start: calc(<number> * 1px); |
mye(<number>) | margin-block-end: calc(<number> * 1px); |
pt(<number>) | padding-top: calc(<number> * 1px); |
pr(<number>) | padding-right: calc(<number> * 1px); |
pb(<number>) | padding-bottom: calc(<number> * 1px); |
pl(<number>) | padding-left: calc(<number> * 1px); |
px(<number>) | padding-inline: calc(<number> * 1px); |
pxs(<number>) | padding-inline-start: calc(<number> * 1px); |
pxe(<number>) | padding-inline-end: calc(<number> * 1px); |
py(<number>) | padding-block: calc(<number> * 1px); |
pys(<number>) | padding-block-start: calc(<number> * 1px); |
pye(<number>) | padding-block-end: calc(<number> * 1px); |
scroll-m(<number>) | scroll-margin: calc(<number> * 1px); |
scroll-mt(<number>) | scroll-margin-top: calc(<number> * 1px); |
scroll-mr(<number>) | scroll-margin-right: calc(<number> * 1px); |
scroll-mb(<number>) | scroll-margin-bottom: calc(<number> * 1px); |
scroll-ml(<number>) | scroll-margin-left: calc(<number> * 1px); |
scroll-mx(<number>) | scroll-margin-inline: calc(<number> * 1px); |
scroll-mxs(<number>) | scroll-margin-inline-start: calc(<number> * 1px); |
scroll-mxe(<number>) | scroll-margin-inline-end: calc(<number> * 1px); |
scroll-my(<number>) | scroll-margin-block: calc(<number> * 1px); |
scroll-mys(<number>) | scroll-margin-block-start: calc(<number> * 1px); |
scroll-mye(<number>) | scroll-margin-block-end: calc(<number> * 1px); |
scroll-p(<number>) | scroll-padding: calc(<number> * 1px); |
scroll-pt(<number>) | scroll-padding-top: calc(<number> * 1px); |
scroll-pr(<number>) | scroll-padding-right: calc(<number> * 1px); |
scroll-pb(<number>) | scroll-padding-bottom: calc(<number> * 1px); |
scroll-pl(<number>) | scroll-padding-left: calc(<number> * 1px); |
scroll-px(<number>) | scroll-padding-inline: calc(<number> * 1px); |
scroll-pxs(<number>) | scroll-padding-inline-start: calc(<number> * 1px); |
scroll-pxe(<number>) | scroll-padding-inline-end: calc(<number> * 1px); |
scroll-py(<number>) | scroll-padding-block: calc(<number> * 1px); |
scroll-pys(<number>) | scroll-padding-block-start: calc(<number> * 1px); |
scroll-pye(<number>) | scroll-padding-block-end: calc(<number> * 1px); |
top(<number>) | top: calc(<number> * 1px); |
right(<number>) | right: calc(<number> * 1px); |
bottom(<number>) | bottom: calc(<number> * 1px); |
left(<number>) | left: calc(<number> * 1px); |
inset(<number>) | inset: calc(<number> * 1px); |
ix(<number>) | inset-inline: calc(<number> * 1px); |
ixs(<number>) | inset-inline-start: calc(<number> * 1px); |
ixe(<number>) | inset-inline-end: calc(<number> * 1px); |
iy(<number>) | inset-block: calc(<number> * 1px); |
iys(<number>) | inset-block-start: calc(<number> * 1px); |
iye(<number>) | inset-block-end: calc(<number> * 1px); |
col-gap(<number>) | column-gap: calc(<number> * 1px); |
row-gap(<number>) | row-gap: calc(<number> * 1px); |
border-spacing(<number>) | border-spacing: calc(<number> * 1px); |
outline-offset(<number>) | outline-offset: calc(<number> * 1px); |
shape-margin(<number>) | shape-margin: calc(<number> * 1px); |
translate(<number>) | translate: calc(<number> * 1px); |
word-spacing(<number>) | word-spacing: calc(<number> * 1px); |
size-x(<number>) | inline-size: calc(<number> * 1px); |
size-y(<number>) | block-size: calc(<number> * 1px); |
min-w(<number>) | min-width: calc(<number> * 1px); |
min-h(<number>) | min-height: calc(<number> * 1px); |
min-size-x(<number>) | min-inline-size: calc(<number> * 1px); |
min-size-y(<number>) | min-block-size: calc(<number> * 1px); |
max-w(<number>) | max-width: calc(<number> * 1px); |
max-h(<number>) | max-height: calc(<number> * 1px); |
max-size-x(<number>) | max-inline-size: calc(<number> * 1px); |
max-size-y(<number>) | max-block-size: calc(<number> * 1px); |
basis(<number>) | flex-basis: calc(<number> * 1px); |
rtl(<number>) | border-top-left-radius: calc(<number> * 1px); |
rtr(<number>) | border-top-right-radius: calc(<number> * 1px); |
rbl(<number>) | border-bottom-left-radius: calc(<number> * 1px); |
rbr(<number>) | border-bottom-right-radius: calc(<number> * 1px); |
rss(<number>) | border-start-start-radius: calc(<number> * 1px); |
rse(<number>) | border-start-end-radius: calc(<number> * 1px); |
res(<number>) | border-end-start-radius: calc(<number> * 1px); |
ree(<number>) | border-end-end-radius: calc(<number> * 1px); |
bt(<number>) | border-top-width: calc(<number> * 1px); |
br(<number>) | border-right-width: calc(<number> * 1px); |
bb(<number>) | border-bottom-width: calc(<number> * 1px); |
bl(<number>) | border-left-width: calc(<number> * 1px); |
bx(<number>) | border-inline-width: calc(<number> * 1px); |
bxs(<number>) | border-inline-start-width: calc(<number> * 1px); |
bxe(<number>) | border-inline-end-width: calc(<number> * 1px); |
by(<number>) | border-block-width: calc(<number> * 1px); |
bys(<number>) | border-block-start-width: calc(<number> * 1px); |
bye(<number>) | border-block-end-width: calc(<number> * 1px); |
outline(<number>) | outline-width: calc(<number> * 1px); |
長度函式將數字乘上 1px；grow()、shrink() 與 order() 則直接傳入該數字。需要其他單位或動態值時，請使用 (margin:1rem) 這類原生宣告。
數字的意義由屬性決定
p(12) 產生 padding: calc(12 * 1px)，因此數字代表像素數量，不是間距尺度的鍵，也不是主題間距 token 的倍數。可以使用小數，例如 p(1.5)。
直接數字會轉成像素長度或無單位係數
左側數字會轉為像素長度。右側數字是 flex 係數：零基底與沒有內容最小尺寸限制的設定，讓 1:2 分配得以單獨呈現。其他基底或最小尺寸可能改變最終寬度。
文字說明
- 內距範例套用真正的 p(12)，讓內容到各個外緣之間恰好為 12px。藍色標註用來顯示這段內距。
- flex 範例在寬 252px、間隙 12px 的橫列中，為兩個 flex 基底與最小寬度都為零的項目，分別套用 grow(1) 與 grow(2)。
- 剩下的 240px 分配為 80px 與 160px。係數仍然無單位，不是像素寬度。
- 這些比較刻意控制其他條件。若基底不是零，或存在內容最小尺寸，最終寬度就不一定符合擴張比例。各個函式的宣告都列在文章中。
grow(1) 與 shrink(1) 是無單位的 flex 係數。擴張會分配剩餘空間；圖中使用零基底且不受內容最小尺寸限制，藉此單獨呈現 1:2 比例。使用其他基底或最小尺寸時，只靠係數無法決定最終寬度。收縮分配也會納入每個項目的 flex 基底尺寸。
order() 直接輸出數字，但 CSS 屬性要求整數。負值仍受各屬性的規則限制：m(-4) 是合法的負外距，但負內距或負 flex 係數無法要求負的使用值。
只能傳入一個靜態數字。單位、var() 與算術運算式應寫在原生宣告中，例如 (padding:var(--panel-space))。共用的具名長度則應使用主題 token，例如 p-card。
這些函式只會設定表中列出的宣告。b(1) 仍需要邊框樣式；top(4) 需要支援 inset 的定位方式；gap(12) 需要可套用間隙的版面配置。表格會區分邏輯屬性與實體屬性。
用法
設定精確的像素長度，並讓其中一個盒子占用剩餘空間。
Fixed
Grows to fill
<div class="… flex flex-wrap gap(12)"> <div class="… p(12) r(10) b(1) b-solid">Fixed</div> <div class="… grow(1) p(12) r(10) b(1) b-dashed">Grows to fill</div></div>產生的 CSS
@layer utilities { .r\(10\) { border-radius: calc(10 * 1px) } .b-dashed { border-style: dashed } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .flex { display: flex } .grow\(1\) { flex-grow: 1 } .flex-wrap { flex-wrap: wrap } .gap\(12\) { gap: calc(12 * 1px) } .p\(12\) { padding: calc(12 * 1px) }}自訂
預設集使用 @utility 定義這些類別。在你的樣式表中定義相同名稱，即可取代原本的定義。
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}全部 100 個定義
@utility m(--value <number>) { margin: calc(var(--value) * 1px);}@utility mt(--value <number>) { margin-top: calc(var(--value) * 1px);}@utility mr(--value <number>) { margin-right: calc(var(--value) * 1px);}@utility mb(--value <number>) { margin-bottom: calc(var(--value) * 1px);}@utility ml(--value <number>) { margin-left: calc(var(--value) * 1px);}@utility mx(--value <number>) { margin-inline: calc(var(--value) * 1px);}@utility mxs(--value <number>) { margin-inline-start: calc(var(--value) * 1px);}@utility mxe(--value <number>) { margin-inline-end: calc(var(--value) * 1px);}@utility my(--value <number>) { margin-block: calc(var(--value) * 1px);}@utility mys(--value <number>) { margin-block-start: calc(var(--value) * 1px);}@utility mye(--value <number>) { margin-block-end: calc(var(--value) * 1px);}@utility p(--value <number>) { padding: calc(var(--value) * 1px);}@utility pt(--value <number>) { padding-top: calc(var(--value) * 1px);}@utility pr(--value <number>) { padding-right: calc(var(--value) * 1px);}@utility pb(--value <number>) { padding-bottom: calc(var(--value) * 1px);}@utility pl(--value <number>) { padding-left: calc(var(--value) * 1px);}@utility px(--value <number>) { padding-inline: calc(var(--value) * 1px);}@utility pxs(--value <number>) { padding-inline-start: calc(var(--value) * 1px);}@utility pxe(--value <number>) { padding-inline-end: calc(var(--value) * 1px);}@utility py(--value <number>) { padding-block: calc(var(--value) * 1px);}@utility pys(--value <number>) { padding-block-start: calc(var(--value) * 1px);}@utility pye(--value <number>) { padding-block-end: calc(var(--value) * 1px);}@utility scroll-m(--value <number>) { scroll-margin: calc(var(--value) * 1px);}@utility scroll-mt(--value <number>) { scroll-margin-top: calc(var(--value) * 1px);}@utility scroll-mr(--value <number>) { scroll-margin-right: calc(var(--value) * 1px);}@utility scroll-mb(--value <number>) { scroll-margin-bottom: calc(var(--value) * 1px);}@utility scroll-ml(--value <number>) { scroll-margin-left: calc(var(--value) * 1px);}@utility scroll-mx(--value <number>) { scroll-margin-inline: calc(var(--value) * 1px);}@utility scroll-mxs(--value <number>) { scroll-margin-inline-start: calc(var(--value) * 1px);}@utility scroll-mxe(--value <number>) { scroll-margin-inline-end: calc(var(--value) * 1px);}@utility scroll-my(--value <number>) { scroll-margin-block: calc(var(--value) * 1px);}@utility scroll-mys(--value <number>) { scroll-margin-block-start: calc(var(--value) * 1px);}@utility scroll-mye(--value <number>) { scroll-margin-block-end: calc(var(--value) * 1px);}@utility scroll-p(--value <number>) { scroll-padding: calc(var(--value) * 1px);}@utility scroll-pt(--value <number>) { scroll-padding-top: calc(var(--value) * 1px);}@utility scroll-pr(--value <number>) { scroll-padding-right: calc(var(--value) * 1px);}@utility scroll-pb(--value <number>) { scroll-padding-bottom: calc(var(--value) * 1px);}@utility scroll-pl(--value <number>) { scroll-padding-left: calc(var(--value) * 1px);}@utility scroll-px(--value <number>) { scroll-padding-inline: calc(var(--value) * 1px);}@utility scroll-pxs(--value <number>) { scroll-padding-inline-start: calc(var(--value) * 1px);}@utility scroll-pxe(--value <number>) { scroll-padding-inline-end: calc(var(--value) * 1px);}@utility scroll-py(--value <number>) { scroll-padding-block: calc(var(--value) * 1px);}@utility scroll-pys(--value <number>) { scroll-padding-block-start: calc(var(--value) * 1px);}@utility scroll-pye(--value <number>) { scroll-padding-block-end: calc(var(--value) * 1px);}@utility top(--value <number>) { top: calc(var(--value) * 1px);}@utility right(--value <number>) { right: calc(var(--value) * 1px);}@utility bottom(--value <number>) { bottom: calc(var(--value) * 1px);}@utility left(--value <number>) { left: calc(var(--value) * 1px);}@utility inset(--value <number>) { inset: calc(var(--value) * 1px);}@utility ix(--value <number>) { inset-inline: calc(var(--value) * 1px);}@utility ixs(--value <number>) { inset-inline-start: calc(var(--value) * 1px);}@utility ixe(--value <number>) { inset-inline-end: calc(var(--value) * 1px);}@utility iy(--value <number>) { inset-block: calc(var(--value) * 1px);}@utility iys(--value <number>) { inset-block-start: calc(var(--value) * 1px);}@utility iye(--value <number>) { inset-block-end: calc(var(--value) * 1px);}@utility gap(--value <number>) { gap: calc(var(--value) * 1px);}@utility col-gap(--value <number>) { column-gap: calc(var(--value) * 1px);}@utility row-gap(--value <number>) { row-gap: calc(var(--value) * 1px);}@utility border-spacing(--value <number>) { border-spacing: calc(var(--value) * 1px);}@utility outline-offset(--value <number>) { outline-offset: calc(var(--value) * 1px);}@utility shape-margin(--value <number>) { shape-margin: calc(var(--value) * 1px);}@utility translate(--value <number>) { translate: calc(var(--value) * 1px);}@utility word-spacing(--value <number>) { word-spacing: calc(var(--value) * 1px);}@utility w(--value <number>) { width: calc(var(--value) * 1px);}@utility h(--value <number>) { height: calc(var(--value) * 1px);}@utility size-x(--value <number>) { inline-size: calc(var(--value) * 1px);}@utility size-y(--value <number>) { block-size: calc(var(--value) * 1px);}@utility min-w(--value <number>) { min-width: calc(var(--value) * 1px);}@utility min-h(--value <number>) { min-height: calc(var(--value) * 1px);}@utility min-size-x(--value <number>) { min-inline-size: calc(var(--value) * 1px);}@utility min-size-y(--value <number>) { min-block-size: calc(var(--value) * 1px);}@utility max-w(--value <number>) { max-width: calc(var(--value) * 1px);}@utility max-h(--value <number>) { max-height: calc(var(--value) * 1px);}@utility max-size-x(--value <number>) { max-inline-size: calc(var(--value) * 1px);}@utility max-size-y(--value <number>) { max-block-size: calc(var(--value) * 1px);}@utility basis(--value <number>) { flex-basis: calc(var(--value) * 1px);}@utility r(--value <number>) { border-radius: calc(var(--value) * 1px);}@utility rtl(--value <number>) { border-top-left-radius: calc(var(--value) * 1px);}@utility rtr(--value <number>) { border-top-right-radius: calc(var(--value) * 1px);}@utility rbl(--value <number>) { border-bottom-left-radius: calc(var(--value) * 1px);}@utility rbr(--value <number>) { border-bottom-right-radius: calc(var(--value) * 1px);}@utility rss(--value <number>) { border-start-start-radius: calc(var(--value) * 1px);}@utility rse(--value <number>) { border-start-end-radius: calc(var(--value) * 1px);}@utility res(--value <number>) { border-end-start-radius: calc(var(--value) * 1px);}@utility ree(--value <number>) { border-end-end-radius: calc(var(--value) * 1px);}@utility b(--value <number>) { border-width: calc(var(--value) * 1px);}@utility bt(--value <number>) { border-top-width: calc(var(--value) * 1px);}@utility br(--value <number>) { border-right-width: calc(var(--value) * 1px);}@utility bb(--value <number>) { border-bottom-width: calc(var(--value) * 1px);}@utility bl(--value <number>) { border-left-width: calc(var(--value) * 1px);}@utility bx(--value <number>) { border-inline-width: calc(var(--value) * 1px);}@utility bxs(--value <number>) { border-inline-start-width: calc(var(--value) * 1px);}@utility bxe(--value <number>) { border-inline-end-width: calc(var(--value) * 1px);}@utility by(--value <number>) { border-block-width: calc(var(--value) * 1px);}@utility bys(--value <number>) { border-block-start-width: calc(var(--value) * 1px);}@utility bye(--value <number>) { border-block-end-width: calc(var(--value) * 1px);}@utility outline(--value <number>) { outline-width: calc(var(--value) * 1px);}@utility grow(--value <number>) { flex-grow: var(--value);}@utility shrink(--value <number>) { flex-shrink: var(--value);}@utility order(--value <integer>) { order: var(--value);}另見 utility 定義.