Esasy ok boýunça Fleks elementiniň ölçegi

width we height aýratynlyklary fleks elementiniň ini we beýikligini oklaryň ugrundan garaşsyz kesgitleýär. Ýagny, eger ok gorizontal bolsa, onda width ini kesgitleýär, ýöne eger ok vertikal bolsa, width henizem ini kesgitleýär. Bäzen şeýle ýagdaý amala aýlaw däl.

Fleks modelinde esasy ok boýunça elementleriň ölçegini kesgitleýän flex-basis diýen aýratyn aýratynlyk bar. Bu şuny aňladýar, eger esasy ok gorizontal bolsa - bu aýratynlyk elementleriň ini kesgitleýär, eger vertikal bolsa - beýikligini. Bu aýratynlyk öz-özüni fleks elementlerine, olaryň ata-enesine däl, kesgitlenmeli. Geliň mysallar görüň.

Indi esasy ok gorizontal bolsun we flex-basis aýratynlygynda 50px baha bolsun. Bu ýagdaýda elementleriň ini 50px bolar:

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; /* ok gorizontal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* element ölçegi */
  border: 1px solid green;
}

Результат:

Indi flex-basis aýratynlygyň bahasyny üýtgetmän, ok ýönüni üýtgedeliň. Bu ýagdaýda elementleriň beýikligi 50px bolar:

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; /* ok vertikal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: