Sifat flex

Sifat flex adalah singkatan untuk flex-basis, flex-shrink dan flex-grow.

Digunakan untuk: blok flex tertentu.

Urutan nilai tidak penting. Parameter kedua dan ketiga (flex-shrink, flex-basis) tidak wajib.

Nilai

Lihat sifat yang berkaitan.

Nilai lalai: 0 1 auto.

Contoh

Katakan kita ada 3 elemen. Lebar setiap satu daripadanya ialah 200px dan jumlahnya sama dengan 600px, yang lebih besar daripada lebar bekas induk, yang sama dengan 300px. Mari kita tetapkan untuk elemen pertama lebar 200px, untuk elemen kedua - 300px, untuk elemen ketiga - 100px. Untuk semua elemen biarkan nilai flex-basis sama dengan 1, dan flex-shrink - 1, 2, 3 mengikut nombor urutan elemen:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Lihat juga

sifat flex-direction,
yang menetapkan arah paksi blok flex
sifat justify-content,
yang menetapkan penjajaran sepanjang paksi utama
sifat align-items,
yang menetapkan penjajaran sepanjang paksi silang
sifat flex-wrap,
yang menentukan kebolehan pelbagai baris blok flex
sifat flex-flow,
singkatan untuk flex-direction dan flex-wrap
sifat order,
yang menetapkan susunan blok flex
sifat align-self,
yang menetapkan penjajaran satu blok
sifat flex-basis,
yang menetapkan saiz blok flex tertentu
sifat flex-grow,
yang menetapkan ketamakan blok flex
sifat flex-shrink,
yang menetapkan kebolehan mengecut blok flex