Lakmia e elementeve flex në CSS

Le të supozojmë se tani kemi dy blloqe flex, të rreshtuar në një rresht. Këtyre blloqeve u është caktuar gjerësi prej 100px, dhe prindit të tyre - 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;
}

Siç e shihni, gjerësia totale e elementeve tona është më e vogël se gjerësia e prindit, kështu që në të djathtë mbetet hapësirë e lirë.

Nëse dëshironi, kjo hapësirë e lirë mund të ndahet në mënyrë proporcionale midis elementeve tanë. Kjo bëhet duke përdorur vetinë flex-grow, e cila u caktohet elementeve flex. Vlera e kësaj vetie është një numër pa dimension.

Le të shohim në praktikë se si funksionon kjo veti.

Shembull

Tani kemi dy blloqe flex me gjerësi 100px. Gjerësia totale e elementeve është 200px, dhe gjerësia e prindit - 300px. Rezulton se mbetet hapësirë e lirë prej 100px.

Nëse elementeve nuk u është caktuar flex-grow, atëherë ne thjesht do ta shohim këtë hapësirë të lirë. Nëse u është caktuar, atëherë gjerësia reale e elementeve do të jetë më e madhe se ajo e caktuar - ato në mënyrë proporcionale do ta ndajnë hapësirën e lirë midis tyre dhe do ta shtojnë atë në gjerësinë e tyre.

Le të supozojmë për shembull se elementi i parë ka flex-grow të barabartë me 1, dhe i dyti - 3. Le të llogarisim se cila pjesë e hapësirës së lirë do të marrë secili element.

Fillimisht duhet të gjejmë sasinë totale të njësive flex-grow të të gjithë elementeve tanë. Elementi i parë e ka të barabartë me 1, dhe i dyti - 3. Kjo do të thotë se në total është 4.

Le të ndajmë tani 100px hapësirë të lirë me 4 dhe do të marrim se 25px i përket një njësie flex-grow. Do të thotë, që elementit të parë do t'i shtohet një njësi flex-grow, pra 25px, dhe të dytit - tre njësi, pra 75px.

Gjerësia e elementit të parë do të jetë 125px, dhe e të dytit - 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;
}

Shembull

Le të supozojmë tani që gjerësia e prindit është 400px, gjerësia e elementit të parë 200px, dhe gjerësia e elementit të dytë - 100px. Do të thotë, se hapësira e lirë përsëri është 100px.

Le t'u caktojmë secilit element flex-grow, të barabartë me 1. Në total do të jetë 2, domethënë 100px hapësirë të lirë duhet të ndahet me 2. Do të thotë se 50px i përgjigjet një njësie lakmie.

Meqenëse të gjithë elementët kanë të njëjtën vlerë flex-grow, atëherë të gjithë elementëve do t'u shtohet e njëjta vlerë prej 50px. Kjo do të thotë, që elementi i parë do të bëhet 250px, dhe i dyti do të bëhet 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;
}

Shembull

Le të supozojmë përsëri që gjerësia e prindit është 400px, gjerësia e elementit të parë 200px, dhe gjerësia e elementit të dytë - 100px.

Le t'i caktojmë tani elementit të parë flex-grow me vlerë 3, dhe të dytit - me vlerë 1. Do të thotë se lakmia në total është 4. Atëherë një njësi lakmie është 100px / 4 = 25px.

Elementit të parë do i shtohet 75px, dhe ai do të bëhet 275px, kurse të dytit - 25px, ai do të bëhet 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;
}

Detyra praktike

Në të gjitha detyrat e mëposhtme do t'ju paraqitet disa kod me elemente flex, të cilët kanë gjerësi dhe flex-grow. Sipas kodit të paraqitur llogaritni, çfarë përmasash do të ketë secili prej elementeve. Pastaj ekzekutoni kodin dhe kontrolloni llogaritjet tuaja, duke matur gjerësitë reale të elementeve.

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