Vlastnosť flex-basis

Vlastnosť flex-basis nastavuje veľkosť konkrétneho flex bloku pred aplikáciou ostatných flex vlastností. Vo všeobecnosti vlastnosť nastavuje veľkosť elementu pozdĺž hlavnej osi. To znamená, že ak je hlavná os horizontálna - táto vlastnosť bude nastavovať šírku elementov, a ak je vertikálna - tak výšku.

Aplikuje sa na konkrétny flex blok.

Táto vlastnosť je súčasťou skrátenej vlastnosti flex.

Syntax

cssselektor {
  flex-basis: ľubovoľné CSS jednotky (a percentá) | auto;
}

Predvolená hodnota: auto.

Príklad

Predpokladajme, že hlavná os je horizontálna a flex-basis má hodnotu 50px. V tomto prípade bude šírka elementov 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; /* os horizontálna */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* veľkosť elementu */
  border: 1px solid green;
}

Результат:

Príklad

Skúsme teraz otočiť os, bez zmeny hodnoty vlastnosti flex-basis. V tomto prípade už výška elementov bude 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; /* os vertikálna */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

Pozri tiež