Align Items
Jajarkan item sepanjang paksi silang
Sintaks
layout="items:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
start | align-items: flex-start | Jajar ke permulaan |
end | align-items: flex-end | Jajar ke hujung |
center | align-items: center | Tengahkan item |
baseline | align-items: baseline | Jajar ke garis asas |
stretch | align-items: stretch | Regangkan item |
Contoh
html
<div layout="flex items:center">Centered</div>Pratonton
Item Tengah
layout="items:center" - Item berpusat sepanjang paksi silang
ShortTallShort
Lihat Kod
html
<div layout="flex items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
<span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
<span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
<span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
</div>Item Permulaan
layout="items:start" - Item dijajarkan ke permulaan paksi silang
ShortTallShort
Lihat Kod
html
<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
<span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
<span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
<span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
</div>Item Regang
layout="items:stretch" - Item diregangkan untuk mengisi ketinggian bekas
123
Lihat Kod
html
<div layout="flex items:stretch" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
<span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
<span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
<span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>