Kerakusan Elemen Flex di CSS

Misalkan sekarang kita memiliki dua blok flex, yang disusun dalam satu baris. Blok-blok ini memiliki lebar 100px, dan induknya - 300px:

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

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Seperti yang Anda lihat, total lebar elemen kita lebih kecil dari lebar induk, sehingga di sebelah kanan tersisa ruang kosong.

Jika diinginkan, ruang kosong ini dapat dibagi secara proporsional di antara elemen-elemen kita. Ini dilakukan dengan menggunakan properti flex-grow, yang diberikan kepada elemen flex. Nilai dari properti ini adalah angka tanpa satuan.

Mari kita lihat dalam praktiknya, bagaimana cara kerja properti ini.

Contoh

Saat ini kita memiliki dua blok flex dengan lebar 100px. Total lebar elemen mereka 200px, dan lebar induk - 300px. Artinya, tersisa ruang kosong sebesar 100px.

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

Sebagai contoh, misalkan elemen pertama memiliki flex-grow sebesar 1, dan elemen kedua - 3. Mari kita hitung, bagian ruang kosong mana yang akan didapat oleh 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 bagilah 100px ruang kosong dengan 4 dan dapatkan bahwa 25px merupakan satu unit flex-grow. Hasilnya, pada elemen pertama akan ditambahkan satu unit flex-grow, yaitu 25px, sedangkan pada elemen kedua - tiga unit, yaitu 75px.

Lebar elemen pertama akan 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

Misalkan sekarang lebar induk adalah 400px, lebar elemen pertama 200px, dan lebar elemen kedua - 100px. Hasilnya, ruang kosong lagi-lagi sebesar 100px.

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

Karena semua elemen memiliki nilai flex-grow yang sama, maka semua elemen akan bertambah nilai yang sama sebesar 50px. Artinya, elemen pertama akan menjadi 250px, dan elemen kedua akan 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 flex-grow ke nilai 3, dan elemen kedua - ke nilai 1. Hasilnya, total kerakusan adalah 4. Maka satu unit kerakusan sama dengan 100px / 4 = 25px.

Elemen pertama akan bertambah 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;
}

Tugas Praktis

Dalam semua tugas di bawah ini, Anda akan diberikan beberapa kode dengan elemen flex yang memiliki lebar dan flex-grow. Berdasarkan kode yang diberikan, hitunglah ukuran yang akan dimiliki setiap elemen. Kemudian jalankan kode dan periksa perhitungan Anda dengan mengukur lebar elemen yang sebenarnya.

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

.parent {
	display: flex;
	width: 500px;
	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;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

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

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

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

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

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

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