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

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.

Související

Možné hodnoty:

  • auto (výchozí)
    Rozměr podle widthheight. Hodnota auto 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 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 – 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 mezi contentauto jen ve Firefoxu. Podobného efektu jako flex-basis:content dosáhnete nastavením flex-basis:autowidth/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

Firefox podporuje ještě další hodnoty – max-contentmin-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 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 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.

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 autocontent žá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 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í.

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

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?