Асосий ўқ бўйича флекс элементнинг ўлчами

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

Результат: