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

selektor {
	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:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.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:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.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ž

vlastnosť flex-direction,
ktorá nastavuje smer osí flex blokov
vlastnosť justify-content,
ktorá nastavuje zarovnanie pozdĺž hlavnej osi
vlastnosť align-items,
ktorá nastavuje zarovnanie pozdĺž priečnej osi
vlastnosť flex-wrap,
ktorá nastavuje viacriadkovosť flex blokov
vlastnosť flex-flow,
skrátenie pre flex-direction a flex-wrap
vlastnosť order,
ktorá nastavuje poradie flex blokov
vlastnosť align-self,
ktorá nastavuje zarovnanie jedného bloku
vlastnosť flex-grow,
ktorá nastavuje "lakomosť" flex blokov
vlastnosť flex-shrink,
ktorá nastavuje stlačiteľnosť flex blokov
vlastnosť flex,
skrátenie pre flex-grow, flex-shrink a flex-basis