Flex elementu alkatība CSS

Pieņemsim, ka mums ir divi flex bloki, izvietoti rindā. Šiem blokiem ir iestatīts platums 100px, bet to vecākam - 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;
}

Kā jūs varat redzēt, mūsu elementu kopējais platums ir mazāks par vecāka elementa platumu, tāpēc labajā pusē paliek brīva vieta.

Ja vēlas, šo brīvo vietu var proporcionāli sadalīt starp mūsu elementiem. Tas tiek darīts, izmantojot īpašību flex-grow, kas tiek piešķirta flex elementiem. Šīs īpašības vērtība ir bezdimensijas skaitlis.

Apskatīsim praksē, kā darbojas šī īpašība.

Piemērs

Pašlaik mums ir divi flex bloki ar platumu 100px. To kopējais platums 200px, bet vecāka elementa platums - 300px. Izrādās, ka paliek brīva vieta 100px.

Ja elementiem nav iestatīts flex-grow, tad mēs vienkārši redzēsim šo brīvo vietu. Ja tas ir iestatīts, tad elementu reālais platums būs lielāks par iestatīto - tie proporcionāli sadalīs brīvo vietu starp sevi un pievienos to savam platumam.

Piemēram, pieņemsim, ka pirmā elementa flex-grow vērtība ir 1, bet otrā - 3. Aprēķināsim, kādu daļu no brīvās vietas saņems katrs elements.

Vispirms jāiegūst kopējais flex-grow vienību skaits visos mūsu elementos. Pirmajam elementam tas ir 1, bet otrajam - 3. Tas nozīmē, ka kopā tas ir 4.

Tagad sadalīsim 100px brīvās vietas ar 4 un iegūsim, ka 25px pienākas vienai flex-grow vienībai. Izrādīsies, ka pie pirmā elementa tiks pievienota viena vienība flex-grow, tas ir, 25px, bet pie otrā - trīs vienības, tas ir, 75px.

Pirmā elementa platums būs 125px, bet otrā - 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;
}

Piemērs

Pieņemsim, ka tagad vecāka elementa platums ir 400px, pirmā elementa platums 200px, bet otrā elementa platums - 100px. Izrādīsies, ka brīvā vieta atkal ir 100px.

Iestatīsim katram elementam flex-grow vērtību 1. Kopā būs 2, tas ir, 100px brīvās vietas jāsadala ar 2. Izrādīsies, ka 50px pienākas vienai alkatības vienībai.

Tā kā visiem elementiem ir vienāda vērtība flex-grow, tad visiem elementiem tiks pievienota vienāda vērtība - 50px. Tas nozīmē, ka pirmais elements kļūs 250px, un otrais kļūs 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;
}

Piemērs

Pieņemsim, ka atkal vecāka elementa platums ir 400px, pirmā elementa platums 200px, bet otrā elementa platums - 100px.

Tagad iestatīsim pirmajam elementam flex-grow vērtību 3, bet otrajam - vērtību 1. Izrādīsies, ka alkatība kopā ir 4. Tad viena alkatības vienība ir 100px / 4 = 25px.

Pirmajam elementam tiks pievienoti 75px, un tas kļūs 275px, bet otrajam - 25px, tas kļūs 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;
}

Praktiskie uzdevumi

Visos zemāk esošajos uzdevumos jums tiks parādīts noteikts kods ar flex elementiem, kuriem ir iestatīts platums un flex-grow. Pamatojoties uz doto kodu, aprēķiniet, kādus izmērus būs katrs no elementiem. Pēc tam palaidiet kodu un pārbaudiet savus aprēķinus, izmērot reālos elementu platumus.

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