Големина на флекс елемент по должина на главната оска

Својствата width и height ја одредуваат ширината и висината на флекс елементот независно од насоката на оските. То ест, ако оската е хоризонтална, тогаш width ќе ја одредува ширината, но ако оската е вертикална, тогаш width сепак ќе ја одредува ширината. Понекогаш таквото однесување не е погодно.

Во флекс моделот постои посебно својство flex-basis, кое ја одредува големината на елементот по должина на главната оска. Ова значи дека ако главната оска е хоризонтална - ова својство ќе ја одредува ширината на елементите, а ако е вертикална - тогаш висината. Ова својство треба да се задава на самите flex елементи, а не на нивниот родител. Ајде да погледнеме на примери.

Нека сега главната оска е хоризонтална, а 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;
}

Результат: