Негизги ок боюнча флекстик элементтин өлчөмү

width жана height касиеттери октордун багытына карабастан флекстик элементтин туурасын жана бийиктигин белгилейт. Башкача айтканда, эгер ок горизонталдык болсо, анда width туурасын белгилейт, бирок эгер ок тик болсо, width дагы эле туурасын белгилей берет. Кээде мындай иш-аракет ыңгайсыз болот.

Флекстик модельде элементтин негизги ок боюнча өлчөмүн белгилөөчү атайын flex-basis касиети бар. Бул дегенди билдирет, эгер негизги ок горизонталдык болсо - бул касиет элементтердин туурасын белгилейт, ал эми тик болсо - анда бийиктигин. Бул касиет ата-энесине эмес, flex элементтеринин өзүнө белгилениши керек. Келгиле, мисалдарды карап көрөлү.

Азыр негизги ок горизонталдык деп коёлу, ал эми 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;
}

Результат: