Flex Direction

Tetapkan arah item flex

Sintaks

layout="[direction]"

Nilai

Nilai	CSS Output	Huraian
row	flex-direction: row	Mendatar (lalai)
col	flex-direction: column	Menegak
row-reverse	flex-direction: row-reverse	Mendatar terbalik
col-reverse	flex-direction: column-reverse	Menegak terbalik

Contoh

<div layout="flex row">Row direction</div>
<div layout="flex col">Column direction</div>

Pratonton

Arah Baris

layout="row" - Item disusun secara mendatar dari kiri ke kanan

123

Lihat Kod

<div layout="flex row" 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>

Arah Lajur

layout="col" - Item disusun secara menegak dari atas ke bawah

123

Lihat Kod

<div layout="flex col" 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>

Baris Terbalik

layout="row-reverse" - Item disusun secara mendatar dari kanan ke kiri

123

Lihat Kod

<div layout="flex row-reverse" 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>