Регулированиеи фишурдани блокҳои флекс дар 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.143 = 14.3px

Васеъии элемент баробар хоҳад шуд:

200px - 14.3px = 185.7px ~ 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;
}