Својството flex-basis

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

Се применува на конкретен flex блок.

Ова својство е составен дел од кратенката својство flex.

Синтакса

cssселектор {
  flex-basis: било кои CSS единици (и проценти) | auto;
}

Стандардна вредност: auto.

Пример

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

Результат:

Погледнете ги и