Flex

Properti pintasan flex

Sintaks

layout="flex:[value]"

Nilai

Nilai	CSS Output	Huraian
1	flex: 1 1 0%	Flex 1
auto	flex: 1 1 auto	Flex auto
initial	flex: 0 1 auto	Flex awal
none	flex: none	Tiada flex

Contoh

<div layout="flex:1">Flexible item</div>

Pratonton

Flex 1

layout="flex:1" - Pengagihan ruang yang sama antara item

flex:1flex:1flex:1

Lihat Kod

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

Flex Auto vs Tiada

layout="flex:auto" - Perbandingan kelakuan flex berbeza

autonone

Lihat Kod

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
  <span layout="flex:none" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">none</span>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div layout="flex:[custom-value]">Custom</div>