Justify Content

Jajarkan item sepanjang paksi utama

Sintaks

layout="justify:[value]"

Nilai

Nilai	CSS Output	Huraian
start	justify-content: flex-start	Jajar ke permulaan
end	justify-content: flex-end	Jajar ke hujung
center	justify-content: center	Tengahkan item
between	justify-content: space-between	Ruang antara item
around	justify-content: space-around	Ruang sekeliling item
evenly	justify-content: space-evenly	Ruang sekata
stretch	justify-content: stretch	Regangkan item

Contoh

<div layout="flex justify:center">Centered</div>
<div layout="flex justify:between">Spaced</div>

Pratonton

Jajar Permulaan

layout="justify:start" - Item dijajarkan ke permulaan bekas

123

Lihat Kod

<div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>

Jajar Tengah

layout="justify:center" - Item berpusat sepanjang paksi utama

123

Lihat Kod

<div layout="flex justify:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>

Jajar Antara

layout="justify:between" - Item dengan ruang sama antara mereka

123

Lihat Kod

<div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>