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

Результат:

Шунингдек қаранг