Madhësia e elementit flex përgjatë boshtit kryesor

Vetitë width dhe height përcaktojnë gjerësinë dhe lartësinë e elementit flex pavarësisht nga drejtimi i boshteve. Kjo do të thotë, nëse boshti është horizontal, width do të përcaktojë gjerësinë, por nëse boshti është vertikal, width prapë do të përcaktojë gjerësinë. Ndonjëherë kjo sjellje nuk është e përshtatshme.

Në modelin flex ekziston një veti e veçantë flex-basis, e cila përcakton madhësinë e elementit përgjatë boshtit kryesor. Kjo do të thotë se nëse boshti kryesor është horizontal - kjo veti do të përcaktojë gjerësinë e elementeve, dhe nëse është vertikal - do të përcaktojë lartësinë. Kjo veti duhet t'u caktohet vetë elementeve flex, dhe jo prindit të tyre. Le të shohim me shembuj.

Le të themi se boshti kryesor është horizontal, dhe flex-basis ka vlerën 50px. Në këtë rast gjerësia e elementeve do të jetë 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; /* boshti horizontal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* madhësia e elementit */
  border: 1px solid green;
}

Результат:

Tani le ta kthejmë boshtin, pa ndryshuar vlerën e vetisë flex-basis. Në këtë rast lartësia e elementeve do të jetë 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; /* boshti vertikal */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: