flex-shrink касиети

flex-shrink касиети flex-контейнердин ичиндеги бош орун жетпей калган учурда, flex-блок кошумча элементтерге салыштырмалуу канчалык кичирейетенин аныктайт.

Мисалы, эгерде flex-контейнердин ичиндеги бардык flex-блоктордо flex-shrink:1 болсо, анда алар бирдей өлчөмдө болот. Эгерде алардын биринде flex-shrink:2 болсо, анда ал калгандарынан 2 эсе кичине болот.

Колдонулат: белгилүү бир flex блогуна.

Бул касиет flex кыскартылган касиетинин курамдык бөлүгү болуп саналат.

Синтаксис

тандоочу {
	flex-shrink: оң сан;
}

Демейки маани: 1.

Мисал

Бизде 3 элемент бар дейли. Алардын ар биринин туурасы 200px жана жалпысы 600px түзөт, бул ата-эне контейнеринин туурасынан чоң, ал эми ал 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

Терс бош орунду формула боюнча эсептейли:

600px - 350px = 250px

Элементтердин салмакталган жалпы туурасы, ар бир элемент үчүн flex-shrink касиетинин маанилерин эске алуу менен, төмөнкүчө болот:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Эми биринчи элемент канчалык кыскарарын аныктайлы:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Экинчи элемент:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Үчүнчү элемент:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Бул flex-shrink мааниси 3 болгон үчүнчү элемент башка элементтерге караганда көбүрөөк кыскарарын көрсөтөт.

Ошондой эле караңыз

flex блоктордун окторун багыттоочу flex-direction касиети
негизги ок боюнча тегиздөөнү белгилөөчү justify-content касиети
көндүрмө ок боюнча тегиздөөнү белгилөөчү align-items касиети
flex блоктордун көп саптуулугун белгилөөчү flex-wrap касиети
flex-direction жана flex-wrap үчүн кыскартылган flex-flow касиети
flex блоктордун иреттүүлүгүн белгилөөчү order касиети
бир блоктун тегиздөөсүн белгилөөчү align-self касиети
белгилүү бир flex блогунун өлчөмүн белгилөөчү flex-basis касиети
flex блоктордун "ач көздүгүн" белгилөөчү flex-grow касиети
flex-grow, flex-shrink жана flex-basis үчүн кыскартылган flex касиети