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

Задание 1

Իրականացրեք նկարագրված բլոկները և ստուգեք չափումներով, որ տարրերի լայնությունը իսկապես հավասար կլինի մեր հաշվարկածին:

Задание 2

Հաշվարկեք բլոկների լայնությունը, ապա ստուգեք հաշվարկները չափումներով.

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

css.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;
}

Задание 3

Հաշվարկեք բլոկների լայնությունը, ապա ստուգեք հաշվարկները չափումներով.

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

css.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;
}

Задание 4

Հաշվարկեք բլոկների լայնությունը, ապա ստուգեք հաշվարկները չափումներով.

html<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>

css.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;
}