Dimenzija fleks elementa duž glavne ose

Svojstva width i height zadaju širinu i visinu fleks elementa nezavisno od smera osa. To znači, ako je osa horizontalna, onda će width zadavati širinu, ali ako je osa vertikalna, onda će width i dalje zadavati širinu. Ponekad takvo ponašanje nije praktično.

U fleks modelu postoji specijalno svojstvo flex-basis, koje zadaje dimenziju elementa duž glavne ose. To znači da ako je glavna osa horizontalna - ovo svojstvo će zadavati širinu elemenata, a ako je vertikalna - onda visinu. Ovo svojstvo treba zadati samim flex elementima, a ne njihovom roditelju. Hajde da pogledamo na primerima.

Neka je sada glavna osa horizontalna, a flex-basis ima vrednost 50px. U ovom slučaju širina elemenata biće 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; /* osa je horizontalna */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* dimenzija elementa */
  border: 1px solid green;
}

Результат:

Hajde sada da okrenemo osu, ne menjajući vrednost svojstva flex-basis. U ovom slučaju će već visina elemenata biti 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; /* osa je vertikalna */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: