CSS-də Fleks Blokların Sıxılma Faktoru

Əvvəlki dərsdə müəyyən etdik ki, fleks elementlərə yer çatışmadıqda, onlar sıxılmağa başlayır. Ümumi enin valideynin enindən nə qədər çox olduğuna mənfi sərbəst məkan deyilir.

Texniki cəhətdən sıxılma o deməkdir ki, hər bir elementin enindən elə bir en hissəsi kəsilir ki, bütün elementlər öz valideyninə sığsın.

Gəlin bir hesablama aparaq. Məsələn, tutaq ki, bizim eni 200px olan 4 elementimiz var. Bu zaman valideynin eni 700px olsun. Deməli, elementlərin ümumi eni bərabərdir:

Bu en valideynin enindən 100px çoxdur. Gəlin hesablayaq, elementlərin valideyninə sığması üçün hər elementdən nə qədər kəsmək lazımdır:

Yəni elementlərin eni belə olacaq:

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