Flex-basis қасиеті

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

Нақты flex блокқа қолданылады.

Бұл қасиет flex қысқартылған қасиетінің құрамдас бөлігі болып табылады.

Синтаксис

cssселектор {
  flex-basis: кез келген CSS бірліктері (және пайыздар) | auto;
}

Әдепкі мәні: auto.

Мысал

Біздің басты ось көлденең орналасса және 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;
}

Результат:

Сондай-ақ қараңыз