Flex elementin esas ox boyu olcusu

width ve height xususiyyetleri flex elementin enini ve hundurluyunu oxlarin istiqametinden asili olmayaraq teyin edir. Yeni, eger ox ufqidirse, width eni teyin edecek, amma ox şaqulidirse, width yenə də eni teyin edecek. Bezen bu davranış rahatsizliq yaradır.

Flex modelinde flex-basis adli xususi bir xususiyyet var, hansi ki, elementin esas ox boyu olcusunu teyin edir. Bu o demekdir ki, eger esas ox ufqidirse - bu xususiyyet elementlerin enini teyin edecek, şaquli olarsa - hundurluyunu. Bu xususiyyet flex elementlerin ozune teyin edilmelidir, valideynine deyil. Gelin numunelerle yaxindan baxaq.

Fərz edek ki, esas ox ufqidir, ve flex-basis 50px qiymetine malikdir. Bu halda elementlerin eni 50px olacaq:

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

Результат:

Gelin indi oxu cevirek, flex-basis xususiyyetinin qiymetini deyişmeden. Bu halda artiq elementlerin hundurluyu 50px olacaq:

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

Результат: