Vlastnost flex-basis
určuje výchozí velikost prvku v rámci flexbox layoutu. Doslovně jde o šířku nebo výšku před rozdělením volného prostoru v kontejneru flexboxu.
Je to velice podobné jako vlastnosti width
nebo height
, ale s tím, že velikost definovaná ve flex-basis
má vždy přednost.
Většinou flex-basis
určuje výchozí šířka položky, tedy jako width
. Alternativně výšku, pokud je směr rozvržení flexboxu svislý, například pomocí nastavení flex-direction:column
.

Různé možnosti hodnot pro vlastnost flex-basis
. Vysvětlujeme je v textu pod obrázkem.
Související
Možné hodnoty:
auto
(výchozí)
Rozměr podlewidth
aheight
. Hodnotaauto
přebírá velikost z těchto dvou vlastností. Pokud ta je takéauto
, pak platí, že rozměr určuje obsah, tedy se použije hodnotacontent
. Distribuce volného místa pomocíflex-grow
aflex-shrink
se pak bude týkat jen místa, které položky okupují nad rámec svého obsahu – tzv. relativní model pružnosti.content
Velikost na základě obsahu položky. Toto klíčové slovo ještě není dobře podporováno. V mých CodePenech níže jsou vidět rozdíly mezicontent
aauto
jen ve Firefoxu. Podobného efektu jakoflex-basis:content
dosáhnete nastavenímflex-basis:auto
awidth
/height
také na hodnotuauto
.0
Nehledí se na rozměr obsahu. Distribuce volného místa pomocíflex-grow
aflex-basis
se bude týkat celé šířky položky – absolutní model pružnosti.- Jakýkoliv CSS rozměr, např.
20%
,100px
,15em
…
Firefox podporuje ještě další hodnoty – max-content
a min-content
. O obou píšeme v kontextu funkce minmax()
, ale vzhledem k podpoře jen v jednom, dnes bohužel už méně významném, prohlížeči, to nebudeme dále rozebírat.
Mimochodem, dokumentace MDN zmiňuje vtipnou historii nastavení flex-basis:auto
. Původně znamenalo „vezmi rozměry z width
/height
“, pak bylo změněno na „vezmi rozměry z obsahu“, aby pak bylo znovu změněno na „vezmi rozměry z width
/height
“. Ale nevím, zda jste zrovna tohle chtěli vědět… Více je na MDN. developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
Různé typy dělení volného prostoru
Zmínili jsme dva možné způsoby počítání zvětšování nebo zmenšování velikosti položky flexboxu. Je to důležité, takže to zde vysvětlíme:
- Relativní pružnost
Pokud uvedemeflex-basis:auto
, velikost boxu se počítá z obsahu a pak se teprve připočtou nebo odečtou faktory růstu (flex-grow
) nebo smršťování (flex-shrink
). - Absolutní pružnost
Pokud uvedeme
flex-basis:0
, nezohlední se velikost obsahu růst nebo smršťování se vypočítává z celé šířky boxu.

Není pružnost jako pružnost. Není model jako model.
Standardní je samozřejmě relativní model pružnosti, ale je potřeba vědět, co nám způsobí flex-basis:0
nebo třeba nastavení vlastnosti flex
na konkrétní číslo.
Ukázky
Máme zde opět jednoduché HTML:
<div class="container">
<p class="box box--one">
<strong>Item 1 (styled)</strong>
</p>
<p class="box box--two">
<strong>Item 2</strong>
</p>
<p class="box box--three">
<strong>Item 3</strong>
</p>
</div>
Kontejner je nastavený jako display:flex
a pomocí přepínačů stylujeme první položku – .box--one
.
Ukázka bez použití width
Můžete zde vidět, mezi auto
a content
žádné rozdíly nejsou. Zde ani ve Firefoxu, který content
počítá správně. Položky .box
totiž nemají nastavené rozměry pomocí vlastností width
či height
.
V případě nastavení flex-basis:0
se použije nejmenší možný obsahový rozměr, což je v případě textu šířka nejdelšího slova.
Jakmile nastavíme rozměr (flex-basis:20%
), chová se vlastnost stejně jako width
.
Ukázka s použitím width
V druhém CodePenu jsme to zkomplikovali přidáním tohoto stylu:
.box--one {
width: 50%;
}
Však si to sami zkuste v živém demu. Ale nejdříve se možná zkuste podle výše uvedeného zamyslet, co přesně se přidáním vlastnosti width
změní.
Tady je potřeba si uvědomit důležitou věc, kterou už jsem zmiňoval – flex-basis
je nadřazená vlastnost k width
nebo height
. Takže i když máme width
nastavenu později, a měla by tudíž přebít flex-basis
, nestane se tak.
Rozeberme si, proč a jak se to celé změnilo:
auto
– má převzít hodnotu zwidth
, což se tady stalo.content
– má vynutit šířku podle obsahu. Vzhledem k podpoře jen ve Firefoxu to na živo uvidíte právě jen tam.0
– nejmenší obsahová šířka, přebíjíwidth
.20%
– konkrétní rozměr, opět přebíjíwidth
.
Vlastnost flex-basis a width/height
Z již uvedeného leccos vyplývá, ale myslím, že nebude od věci si přehledně připomenout, jak se liší nastavování rozměrů pomocí flex-basis
od téhož s použitím width
a height
.
1) flex-basis
má přednost
Platí, že při použití obou metod nastavení výšky nebo šířky dostane hodnota ve flex-basis
přednost, bez ohledu na pořadí uvedení.
2) flex-basis
je obousměrné
Lze jej použít jako pro výšku, tak pro šířku. Vždy podle směru layoutu a ten určuje nejčastěji vlastnost flex-direction
.
3) flex-basis
se nezmenší pod minimální velikost obsahu
Na rozdíl od width
a height
nemůže být flex-basis
menší než minimální šířka obsahu, což je například u textu šířka nejdelšího slova.
4) Minimální a maximální velikost platí
Pokud byste chtěli omezit velikost prvku minimemem nebo maximem, můžete využít vlastností min-width
/height
a max-width
/height
.
Toto platí právě proto, že:
- rozměry prvku ve flexboxu se berou z
flex-basis
, - pokud není definováno, pak z
width
/height
, - pokud ani jedno není definováno, pak z obsahu.
flex-basis > width/height > obsah
Používejte vlastnost flex
Obecně platí, že vlastnost flex
je lepší než flex-basis
a to je lepší než width
/height
.
Vlastnost flex-basis
totiž zvládne jak výšku, tak šířku, což se při změně směru rozvržení může hodit.
Vlastnost flex
je ještě praktičtější, protože má chytře vymyšlené výchozí hodnoty a zároveň pomocí ní můžete definovat další důležité vlastnosti – flex-shrink
nebo flex-grow
(css-flex-grow.md).
Podpora v prohlížečích
Základní podpora pro flex-basis
je v prohlížečích výborná.
Výjimku si nárokuje jen Internet Explorer, který při jiném nastavení než flex-basis:auto
počítá velikost prvku podle box modelu content-box
.
→ Související: box-sizing:content-box
a další hodnoty pro změnu počítání šířky boxů
No a pak tady máme ošemetné klíčové slovo content
– podle chování mých demíček usuzuji, že správně ji ke dni psaní interpretuje jen Firefox.
Více najdete na CanIUse.com.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?