Properti flex-grow

Properti flex-grow menentukan, seberapa besar sebuah blok flex individual dapat lebih besar dari elemen-elemen tetangganya, jika diperlukan.

Misalnya, jika semua blok flex di dalam kontainer flex memiliki flex-grow:1, maka mereka akan berukuran sama. Jika salah satunya memiliki flex-grow:2, maka itu akan 2 kali lebih besar dari semua yang lainnya.

Jika lebar total elemen lebih kecil dari lebar induknya, maka akan ada ruang kosong di sebelah kanan. Jika diinginkan, ruang kosong ini dapat dibagi secara proporsional di antara elemen-elemen kita. Ini dilakukan dengan menggunakan properti flex-grow, yang ditetapkan pada elemen flex. Nilai dari properti ini adalah angka tanpa dimensi.

Berlaku untuk: blok flex tertentu.

Properti ini merupakan bagian dari properti singkatan flex.

Sintaksis

selektor {
	flex-grow: angka positif;
}

Nilai default: 0.

Contoh

Saat ini kita memiliki dua blok flex dengan lebar 100px. Total lebar elemennya 200px, sedangkan lebar induknya - 300px. Artinya, ada ruang bebas sebesar 100px.

Jika elemen tidak diberikan flex-grow, maka kita hanya akan melihat ruang bebas ini. Jika diberikan, maka lebar elemen sebenarnya akan lebih besar dari yang ditetapkan - mereka secara proporsional membagi ruang bebas di antara mereka sendiri dan menambahkannya ke lebar mereka.

Sebagai contoh, misalkan elemen pertama memiliki flex-grow sebesar 1, dan yang kedua - 3. Mari kita hitung, bagian ruang bebas mana yang akan didapat setiap elemen.

Pertama, perlu mendapatkan total jumlah unit flex-grow dari semua elemen kita. Pada elemen pertama nilainya 1, dan pada elemen kedua - 3. Artinya, totalnya adalah 4.

Sekarang bagi 100px ruang bebas dengan 4 dan dapatkan bahwa 25px merupakan satu unit flex-grow. Hasilnya, elemen pertama akan ditambah satu unit flex-grow, yaitu 25px, sedangkan elemen kedua - tiga unit, yaitu 75px.

Lebar elemen pertama menjadi 125px, dan elemen kedua - 175px:

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

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

Contoh

Sekarang misalkan lebar induk adalah 400px, lebar elemen pertama 200px, dan lebar elemen kedua - 100px. Hasilnya, ruang bebas kembali sebesar 100px.

Mari kita berikan setiap elemen flex-grow, sebesar 1. Totalnya menjadi 2, artinya 100px ruang bebas perlu dibagi dengan 2. Hasilnya, 50px merupakan satu unit keserakahan.

Karena semua elemen memiliki nilai flex-grow yang sama, maka semua elemen akan ditambahkan nilai yang sama sebesar 50px. Artinya, elemen pertama menjadi 250px, dan elemen kedua menjadi 150px:

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

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Contoh

Misalkan lagi lebar induk adalah 400px, lebar elemen pertama 200px, dan lebar elemen kedua - 100px.

Sekarang mari kita atur elemen pertama dengan flex-grow ke nilai 3, dan elemen kedua - ke nilai 1. Hasilnya, total keserakahan adalah 4. Maka satu unit keserakahan adalah 100px / 4 = 25px.

Elemen pertama akan ditambahkan 75px, dan menjadi 275px, sedangkan elemen kedua - 25px, menjadi 125px:

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

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Lihat juga

properti flex-direction,
yang mengatur arah sumbu blok flex
properti justify-content,
yang mengatur perataan sepanjang sumbu utama
properti align-items,
yang mengatur perataan sepanjang sumbu silang
properti flex-wrap,
yang mengatur multi-baris blok flex
properti flex-flow,
singkatan untuk flex-direction dan flex-wrap
properti order,
yang mengatur urutan blok flex
properti align-self,
yang mengatur perataan satu blok
properti flex-basis,
yang mengatur ukuran blok flex tertentu
properti flex-shrink,
yang mengatur penciutan blok flex
properti flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis