Флекс элементінің басты ось бойынша өлшемі

width және height қасиеттері осьтердің бағытына тәуелсіз флекс элементінің ені мен биіктігін береді. Яғни, егер ось көлденең болса, онда width енді береді, бірақ егер ось тік болса, онда width бәрібір енді береді. Кейде мұндай мінез ыңғайсыз болады.

Флекс модельде элементтің өлшемін басты ось бойынша беретін арнайы қасиет flex-basis бар. Бұл дегеніміз, егер басты ось көлденең болса - бұл қасиет элементтердің енін береді, ал егер тік болса - онда биіктігін береді. Бұл қасиетті флекс элементтердің өздеріне беру керек, олардың ата-анасына емес. Мысалдармен қарап көрейік.

Қазір басты ось көлденең болсын, ал flex-basis 50px мәніне ие болсын. Бұл жағдайда элементтердің ені 50px болады:

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

css.parent {
  display: flex;
  flex-direction: row; /* ось көлденең */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* элементтің өлшемі */
  border: 1px solid green;
}

Результат:

Енді осьті бұрмай, flex-basis қасиетінің мәнін өзгертпей аударайық. Бұл жағдайда элементтердің биіктігі 50px болады:

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

css.parent {
  display: flex;
  flex-direction: column; /* ось тік */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: