Sifat flex-grow

Sifat flex-grow menentukan, berapa banyak blok flex individu boleh lebih besar daripada elemen jiran, jika perlu.

Sebagai contoh, jika semua blok flex dalam flex-container mempunyai flex-grow:1, maka mereka akan sama saiz. Jika salah satu daripadanya mempunyai flex-grow:2, maka ia akan 2 kali lebih besar daripada semua yang lain.

Jika jumlah lebar elemen kurang daripada lebar induk, maka ruang kosong kekal di sebelah kanan. Jika dikehendaki, ruang kosong ini boleh diagih secara berkadar antara elemen kita. Ini dilakukan dengan menggunakan sifat flex-grow, yang ditetapkan untuk elemen fleksibel. Nilai bagi sifat ini adalah nombor tanpa dimensi.

Terpakai untuk: blok flex tertentu.

Sifat ini merupakan sebahagian daripada sifat singkatan flex.

Sintaks

selector {
	flex-grow: nombor positif;
}

Nilai lalai: 0.

Contoh

Sekarang kita mempunyai dua blok flex dengan lebar 100px. Jumlah lebar elemen mereka 200px, manakala lebar induk ialah 300px. Ini bermakna ruang kosong kekal sebanyak 100px.

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

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

Pertama, perlu mendapatkan jumlah unit flex-grow semua elemen kita. Untuk elemen pertama ia ialah 1, dan untuk yang kedua - 3. Ini bermakna secara jumlah ia sama dengan 4.

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

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

Sekarang katakan lebar induk ialah 400px, lebar elemen pertama 200px, dan lebar elemen kedua - 100px. Ini bermakna ruang kosong sekali lagi sama dengan 100px.

Mari tetapkan flex-grow untuk setiap elemen, 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 elemen mempunyai nilai flex-grow yang sama, maka semua elemen akan ditambah nilai yang sama sebanyak 50px. Ini bermakna, 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

Katakan sekali lagi lebar induk sama dengan 400px, lebar elemen pertama 200px, dan lebar elemen kedua - 100px.

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

Elemen pertama akan ditambah 75px, dan ia akan menjadi 275px, manakala 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;
}

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 kebolehbalutan berbilang 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-shrink,
yang menetapkan kebolehmampatan blok flex
sifat flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis