CSS vlastnost flex-grow: faktor zvětšování položky flexboxu

Jak moc může položka růst relativně k dalším položkám, pokud je k dispozici volné místo – například když uživatel zvětší okno prohlížeče? To určuje vlastnost flex-grow.

Specifikace a praktická zkušenost nás – namísto používání vlastnosti flex-grow – navádejí spíše ke zkratce flex, ale přesto považuji za nutné se o této vlastnosti zmínit.

Možné hodnoty:

• 0 (výchozí)
  Znamená, že položka s přibývajícím volným místem nijak neroste.
• Kladná čísla (např. 0.5, 1, 2…)
  Položky si rozdělují podíly z nově získaného místa nad rámec výchozí šířky.

Záporné hodnoty zde nejsou validní, ale desetinná čísla jsou povolená, což už jste viděli.

Demo

V interaktivní ukázce máme kontejner flexboxu (display:flex) a první položce přidáváme různě hodnoty vlastnosti flex-grow:

Druhé a třetí položce jsme jsme nenastavili žádnou šířku. HTML vypadá následovně:

<div class="container">
  <p class="box box--one">
    <strong>Item 1<br>(styled)</strong>
  </p>
  <p class="box box--two">
    <strong>Item 2</strong>
  </p>
  <p class="box box--three">
    <strong>Item 3</strong>
  </p>  
</div>

Ve výchozím stavu se všechny tři položky roztáhnou podle své přirozené velikosti. Pokud bude v rodičovském kontejneru dostatek volného místa, pak si první položka, stylovaná přepínači nahoře, vezme tolik zbývajícího prostoru, kolik jsme jí ochotní dát právě nastavením vlastnosti flex-grow:

• 0 – zůstane na výchozí šířce.
• 0.5 – vezme si polovinu volného prostoru.
• 1 – roztáhne se do celé šířky volného prostoru.
• 2 – opět se jen roztáhne do celé šířky volného prostoru.

U poslední možnosti, nastavení na 2 se pozastavme. Je zde vidět, že flex-grow hospodaří vždy jen s prostorem uvnitř kontejneru flexboxu, takže neumožní položce zabrat dvojnásobek zbytku a vyrůst tedy mimo kontejner.

Hodnota 2 by měla efekt pokud bychom v demu změnili nastavení růstu ostatních položek, například na flex-grow:1. V takovém případě by se stala poněkud obézní a zabrala by ze zbylého prostoru dvojnásobek oproti jejím dvěma sestrám.

Podpora v prohlížečích

Podpora CSS vlastnosti flex-grow je plná. Jen pro zajímavost zmiňuji, že v Internet Exploreru 10 byla tato vlastnost pojmenována ještě jako -ms-flex-positive. Více o podpoře v prohlížečích najdete na webu CanIUse.