Рэгуляванне сціску флекс блокаў у CSS

Па змаўчанні ад усіх элементаў адшчэпліваюцца кавалачкі, прапарцыйныя шырыні элемента. Аднак, можна зрабіць так, каб ад некаторых элементаў адшчэпліваліся большыя ці меншыя кавалкі. Для гэтага існуе спецыяльная ўласцівасць flex-shrink.

Даная ўласцівасць ўяўляе сабой некаторы ўес, на які будзе памнажацца шырыня элемента пры падліку адшчэпліваемага кавалачка па ўжо прыведзенай вышэй формуле. Напрыклад, калі шырыня элемента роўная 200px, а яго flex-shrink роўны 3, то ўзважаная (г.зн. памножаная на ўес) шырыня элемента атрымаецца роўная:

200px * 3 = 600px

Формула з улікам flex-shrink будзе мець наступны выгляд: адмоўнае свабодная прастора * (ўзважаная шырыня элемента / сума ўсіх узважаных шырынь элементаў).

Давайце паглядзім на прыкладзе. Хай у нас ёсць 4 элемента. Хай шырыня першага элемента роўная 400px, а flex-shrink роўны 2, шырыня астатніх элементаў - 200px, а іх flex-shrink роўны 1. Хай шырыня бацькі 900px.

Сумарная шырыня элементаў роўная:

400px + 3 * 200px = 1000px

Адмоўная свабодная прастора будзе роўная:

1000px - 900px = 100px

Сумарная ўзважаная шырыня элементаў роўная:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Узважаная шырыня першага элемента роўная:

400px * 2 = 800px

Ад першага элемента адшчэпліцца наступны кавалачак:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Шырыня элемента будзе роўная:

400px - 57.14px = 342.86px ~ 343px

Узважаная шырыня кожнага з астатніх элементаў роўная:

200px * 1 = 200px

Ад кожнага элемента адшчэпліцца наступны кавалачак:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Шырыня элемента будзе роўная:

200px - 14.2px = 185.8px ~ 186px

Рэалізуйце апісаныя блокі і праверце вымярэннем, што шырыня элементаў будзе сапраўды роўная разлічанай намі.

Разлічыце шырыню блокаў, а затым праверце разлікі вымярэннем:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 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: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}