Vlastnost flex-basis

Vlastnost flex-basis nastavuje velikost konkrétního flex bloku před aplikací ostatních flex vlastností. Obecně vlastnost nastavuje velikost prvku podél hlavní osy. To znamená, že pokud je hlavní osa horizontální - tato vlastnost bude nastavovat šířku prvků, a pokud je vertikální - pak výšku.

Aplikuje se na konkrétní flex blok.

Tato vlastnost je součástí zkrácené vlastnosti flex.

Syntaxe

selektor {
	flex-basis: libovolné CSS jednotky (a procenta) | auto;
}

Výchozí hodnota: auto.

Příklad

Předpokládejme, že hlavní osa je horizontální, a flex-basis má hodnotu 50px. V tomto případě bude šířka prvků 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; /* osa horizontální */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* velikost prvku */
	border: 1px solid green;
}

Příklad

Nyní otočme osu, aniž bychom změnili hodnotu vlastnosti flex-basis. V tomto případě již bude výška prvků 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; /* osa vertikální */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Viz také

vlastnost flex-direction,
která nastavuje směr os flex bloků
vlastnost justify-content,
která nastavuje zarovnání podél hlavní osy
vlastnost align-items,
která nastavuje zarovnání podél příčné osy
vlastnost flex-wrap,
která nastavuje víceřádkovost flex bloků
vlastnost flex-flow,
zkratka pro flex-direction a flex-wrap
vlastnost order,
která nastavuje pořadí flex bloků
vlastnost align-self,
která nastavuje zarovnání jednoho bloku
vlastnost flex-grow,
která nastavuje "hladovost" flex bloků
vlastnost flex-shrink,
která nastavuje stlačitelnost flex bloků
vlastnost flex,
zkratka pro flex-grow, flex-shrink a flex-basis