Flex Wrap

Kawal bagaimana item flex membungkus

Sintaks

layout="[wrap-value]"

Nilai

Nilai	CSS Output	Huraian
wrap	flex-wrap: wrap	Benarkan pembungkusan
nowrap	flex-wrap: nowrap	Halang pembungkusan
wrap-reverse	flex-wrap: wrap-reverse	Bungkus terbalik

Contoh

<div layout="flex wrap">Wrapping flex</div>

Pratonton

Bungkus Diaktifkan

layout="wrap" - Item membungkus ke baris seterusnya apabila bekas penuh

Item 1Item 2Item 3Item 4

Lihat Kod

<div layout="flex wrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px;">
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 4</span>
</div>

Tiada Bungkusan

layout="nowrap" - Item kekal pada satu baris (mungkin melimpah)

Item 1Item 2Item 3

Lihat Kod

<div layout="flex nowrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px; overflow: hidden;">
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
</div>