Нулевая жадность флекс элементов в CSS

Агар flex-grow барои ягон элемент баробари сифр бошад, он элемент дар тақсимоти фазои озод иштирок нахоҳад кард. Ба таври пешфарз ҳарисиҳат дар асл қимати сиферро дорад ва аз ин рӯ элементҳое, ки flex-grow-и онҳо муайян нашудааст, фазои озодро байни худ тақсим намекунанд.

Биёед барои мисол як ҳисобкуниро анҷом диҳем. Фарз мекунем, ки се элементҳои flex дорем, ҳар яке бо паҳнои 100px. Фарз мекунем, ки аввалин элемент flex-grow надорад (ё он баробари 0 аст), дуюмин элемент flex-grow дорад, ки баробари 2 аст, ва сеюмин - баробари 3.

Фарз мекунем, ки паҳнои волидайн баробари 500px аст. Он гоҳ фазои озод баробар хоҳад буд ба 200px, ва ба як воҳиди flex-grow 200px / 5 = 40px мерасад. Натиҷа ин аст, ки паҳнои элементи аввал ҳамчунон 100px хоҳад монд, зеро он дар тақсимот иштирок намекунад, паҳнои дуюмин элемент 100px + 2 * 40px = 180px хоҳад буд, ва паҳнои сеюмин - 100px + 3 * 40px = 220px.

Вазифаҳои амалӣ

Дар ҳамаи вазифаҳои дар поён овардашуда ба шумо як рамзе бо элементҳои flex, ки паҳно ва flex-grow доранд, пешниҳод карда мешавад. Бар асоси рамзи пешниҳодшуда ҳисоб кунед, ки ҳар яке аз элементҳо кадом андозаҳоро хоҳад дошт. Сипас рамзро оғоз кунед ва ҳисобҳои худро тафтиш кунед, бо чен кардани паҳнои воқеии элементҳо.

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

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}