CSS-тегі флекс элементтерінің ұтымдылығы

Қазіргі уақытта бізде қатарға тұрғызылған екі флекс-блок бар делік. Бұл блоктарға 100px ені берілген, ал олардың ата-анасына - 300px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Көріп отырғаныңыздай, біздің элементтердің жалпы ені ата-анасының енінен аз, сондықтан оң жақта бос орын қалады.

Қажет болса, бұл бос орынды элементтеріміз арасында пропорционалды бөлуге болады. Бұл флекс-элементтерге берілетін flex-grow қасиеті арқылы жасалады. Бұл қасиеттің мәні өлшемсіз сан болып табылады.

Бұл қасиеттің тәжірибеде қалай жұмыс істейтінін көрейік.

Мысал

Қазір бізде ені 100px болатын екі флекс-блок бар. Элементтердің жалпы ені 200px, ал ата-анасының ені - 300px. Бұл 100px бос орын қалатынын білдіреді.

Егер элементтерге flex-grow берілмеген болса, онда біз жай ғана бос орынды көреміз. Егер ол берілген болса, онда элементтердің нақты ені берілгеннен үлкен болады - олар бос орынды өзара пропорционалды бөліп, оны өз еніне қосады.

Мысал ретінде бірінші элементтің flex-grow 1-ге тең болсын, ал екіншісінікі - 3. Әрбір элемент қанша бөлек бос орын алатынын есептейік.

Алдымен барлық элементтердің flex-grow бірліктерінің жалпы санын алу керек. Бірінші элементтің мәні 1, ал екіншісінікі - 3. Бұл олардың қосындысы 4-ге тең екенін білдіреді.

Енді 100px бос орынды 4-ке бөлеміз және flex-grow бірлігіне 25px келетінін аламыз. Бұл бірінші элементке бір flex-grow бірлігі, яғни 25px, қосылатынын білдіреді, ал екіншісіне - үш бірлік, яғни 75px.

Бірінші элементтің ені 125px болады, ал екіншісінікі - 175px:

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

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

Мысал

Енді ата-анасының ені 400px-ке тең болсын, бірінші элементтің ені 200px, ал екінші элементтің ені - 100px. Бұл бос орын тағы да 100px-ге тең болатынын білдіреді.

Әр элементке flex-grow орнатайық, 1-ге тең. Қосындысы 2 болады, яғни 100px бос орынды 2-ге бөлу керек. Бұл ұтымдылық бірлігіне 50px келетінін білдіреді.

Барлық элементтердің flex-grow мәні бірдей болғандықтан, барлық элементтерге бірдей мән 50px қосылады. Бұл бірінші элементтің 250px болатынын, және екіншісінің 150px болатынын білдіреді:

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

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Мысал

Тағы да ата-анасының ені 400px-ке тең болсын, бірінші элементтің ені 200px, ал екінші элементтің ені - 100px.

Енді бірінші элементке flex-grow мәнін 3 деп, ал екіншіге - 1 деп орнатайық. Бұл ұтымдылықтың қосындысы 4 болатынын білдіреді. Сонда бір бірлік ұтымдылық 100px / 4 = 25px-ге тең болады.

Бірінші элементке 75px қосылады, және ол 275px болады, ал екіншіге - 25px, ол 125px болады:

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

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Практикалық тапсырмалар

Төмендегі барлық тапсырмаларда сізге ені және flex-grow бар флекс-элементтері бар код ұсынылады. Ұсынылған код бойынша әрбір элементтің қандай өлшемдерге ие болатынын есептеңіз. Содан кейін кодты іске қосыңыз және нақты элементтердің енін өлшеу арқылы есептеулеріңізді тексеріңіз.

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

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

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