Ketamakan Unsur Flex dalam CSS

Katakan sekarang kita ada dua blok flex, disusun dalam baris. Blok-blok ini diberikan lebar 100px, dan ibu bapa mereka - 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, jumlah lebar unsur kami kurang daripada lebar ibu bapa, jadi terdapat ruang kosong di sebelah kanan.

Jika dikehendaki, ruang kosong ini boleh diagihkan secara berkadar antara unsur kami. Ini dilakukan dengan menggunakan sifat flex-grow, yang ditetapkan untuk unsur flex. Nilai sifat ini adalah nombor tanpa dimensi.

Mari kita lihat dalam praktik, bagaimana sifat ini berfungsi.

Contoh

Sekarang kita ada dua blok flex dengan lebar 100px. Jumlah lebar unsur 200px, dan lebar ibu bapa - 300px. Ini bermakna terdapat ruang kosong sebanyak 100px.

Jika unsur tidak diberikan flex-grow, maka kita hanya akan melihat ruang kosong ini. Jika ia diberikan, maka lebar sebenar unsur akan lebih besar daripada yang ditetapkan - mereka secara berkadar membahagikan ruang kosong antara mereka sendiri dan menambahkannya kepada lebar mereka.

Sebagai contoh, katakan unsur pertama mempunyai flex-grow sama dengan 1, dan yang kedua - 3. Mari kira, bahagian ruang kosong mana yang akan diperoleh setiap unsur.

Pertama, perlu mendapatkan jumlah unit flex-grow semua unsur kami. Unsur pertama ialah 1, dan yang kedua - 3. Ini bermakna secara jumlah ia sama dengan 4.

Sekarang bahagikan 100px ruang kosong dengan 4 dan dapatkan bahawa 25px diperuntukkan kepada satu unit flex-grow. Ini bermakna, kepada unsur pertama akan ditambah satu unit flex-grow, iaitu 25px, dan kepada yang kedua - tiga unit, iaitu 75px.

Lebar unsur pertama akan menjadi 125px, dan yang 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

Katakan sekarang lebar ibu bapa sama dengan 400px, lebar unsur pertama 200px, dan lebar unsur kedua - 100px. Ini bermakna, ruang kosong sekali lagi sama dengan 100px.

Mari kita tetapkan flex-grow untuk setiap unsur, sama dengan 1. Jumlahnya akan menjadi 2, iaitu 100px ruang kosong perlu dibahagikan dengan 2. Ini bermakna 50px diperuntukkan untuk satu unit ketamakan.

Oleh kerana semua unsur mempunyai nilai flex-grow yang sama, maka semua unsur akan ditambah nilai yang sama sebanyak 50px. Ini bermakna, unsur pertama akan menjadi 250px, dan yang 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

Katakan sekali lagi lebar ibu bapa sama dengan 400px, lebar unsur pertama 200px, dan lebar unsur kedua - 100px.

Sekarang mari kita tetapkan untuk unsur pertama flex-grow kepada nilai 3, dan yang kedua - kepada nilai 1. Ini bermakna ketamakan secara jumlah sama dengan 4. Kemudian satu unit ketamakan sama dengan 100px / 4 = 25px.

Kepada unsur pertama akan ditambah 75px, dan ia akan menjadi 275px, dan kepada yang kedua - 25px, ia akan 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;
}

Masalah Praktikal

Dalam semua masalah di bawah, anda akan dibentangkan dengan beberapa kod dengan unsur flex yang mempunyai lebar dan flex-grow. Berdasarkan kod yang dibentangkan, kira saiz yang akan dimiliki setiap unsur. Kemudian jalankan kod dan semak pengiraan anda dengan mengukur lebar sebenar unsur.

<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;
}