Фактори фишориши блокҳои флекс дар CSS

Дар дарси қаблӣ мо муайян кардем, ки вақте ба унсурҳои флекс ҷой кам мешавад, онҳо оғоз ба фишор кардан мекунанд. Миқдори зиёдии умумии васеъӣ аз васеъии волидайн фазои озоди манфӣ номида мешавад.

Аз ҷиҳати техникӣ, фишор кардан маънои онро дорад, ки аз васеъии ҳар як унсур порае аз васеъӣ канда мешавад, то ҳама унсурҳо дар волидайни худ ҷой гиранд.

Биёед баъзе ҳисобкуниҳоро анҷом диҳем. Фарз мекунем, ки масалан, мо 4 унсуре бо васеъӣ 200px дорем. Фарз мекунем, ки дар ин ҳол васеъии волидайн ба 700px баробар аст. Маълум мешавад, ки ҳосили ҷамъи васеъии унсурҳо баробар аст ба:

200px * 4 = 800px

Ин васеъӣ ба 100px аз васеъии волидайн зиёдтар аст. Биёед ҳисоб кунем, ки аз ҳар як унсур чӣ қадар бояд канд, то унсурҳо ҷой гиранд дар волидайни худ:

100px / 4 = 25px

Яъне васеъии унсурҳо хоҳад буд:

200px - 25px = 175px

Блокҳои тавсифшударо амалӣ созед ва бо чен кардан тасдиқ кунед, ки васеъии унсурҳо воқеан ба ҳисобкардаи мо баробар аст.

Васеъии блокҳоро ҳисоб кунед, ва сипас ҳисобҳоро бо чен кардан тасдиқ кунед:

<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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}