Martin Michálek Martin Michálek  – 10. 2. 2021

Vlastnost flex-basis určuje výchozí velikost prvku v rámci rozvržení postaveném na flexboxu.

CSS vlastnost flex-basis

flex-basis je jedna z vlastností 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.

Doslovně se definuje jako šířka nebo výška před rozdělením volného prostoru v kontejneru flexboxu.

Většinou flex-basis určuje výchozí šířku položky, tedy jako width. Alternativně výšku, pokud je směr rozvržení flexboxu svislý, například pomocí nastavení flex-direction:column.

Možné hodnoty:

  • auto (výchozí)
    Přebírá rozměr podle widthheight. Pokud ten je také auto, pak platí, že rozměr určuje obsah, tedy se použije dále uvedená hodnota content. Distribuce volného místa pomocí flex-growflex-shrink se pak bude týkat jen místa, které položky okupují nad rámec svého obsahu – „relativní model“ pružnosti rozebírám také níže.
  • 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 mezi contentauto jen ve Firefoxu. Podobného efektu jako s  flex-basis:content dosáhnete nastavením flex-basis:auto a vlastností width/height také na hodnotu auto.
  • 0
    Nehledí se na rozměr obsahu. Distribuce volného místa pomocí flex-growflex-basis se bude týkat celé šířky položky – „absolutní model“ pružnosti.
  • Jakýkoliv CSS rozměr, např. 20%, 100px, 15em… – toto je naštěstí nejčastější a tedy ne tak komplikované.

Firefox podporuje ještě další hodnoty – max-contentmin-content. O obou pak píšu v kontextu funkce minmax().

Mimochodem, dokumentační stránka 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… mdn.io/flex-basis

Různé typy dělení volného prostoru

Zmínil jsem 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ím:

  • Relativní pružnost
    Pokud uvedeme flex-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 textového nebo jiného obsahu. Růst nebo smršťování se vypočítává z celé šířky boxu.

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

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ázky jsem připravil dvě – v jedné využívám vlastnosti flex-basis samotnou a v druhé zároveň s width.

Ukázka bez použití width

Můžete zde vidět, mezi hodnotami autocontent žádné rozdíly nejsou. V Chrome, Safari 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%;
}

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 z width, 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 widthheight.

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í. Zkuste si to případně v ukázce.

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 widthheight 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/heightmax-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

flex-basis má přednost před width/height a ty mají přednost před obsahem.

Používejte vlastnost flex

Obecně navíc 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 – smršťování pomocí flex-shrink nebo rozpínání pomocí flex-grow.

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, stejně jako klíčová slova max-contentmin-content.

Více najdete na CanIUse.com.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?