Align Content

Jajarkan baris kandungan dalam bekas flex berbilang baris

Sintaks

layout="content:[value]"

Nilai

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

Contoh

<div layout="flex wrap content:center">Centered rows</div>

Pratonton

Kandungan Tengah

layout="content:center" - Tengahkan baris bungkus dalam bekas berbilang baris

1234

Lihat Kod

<div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
  <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>
  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
</div>

Kandungan Antara

layout="content:between" - Ruang antara baris bungkus

1234

Lihat Kod

<div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
  <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>
  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
</div>