Na skróty

Kontener, który układa elementy w kolumnie i zawija je do nowej linii, to dwie osobne deklaracje. Element, który ma rosnąć, nie kurczyć się i startować od 200 pikseli, to kolejne trzy. W arkuszu z dziesiątkami reguł takie linijki mnożą się jak zwoje w archiwum świątyni. Egipscy skrybowie znali na to sposób: obok hieroglifów używali pisma hieratycznego, szybszej i uproszczonej formy tych samych znaków. CSS też ma skrócone formy zapisu, a we Flexboksie najważniejsze są dwie: flex dla elementów i flex-flow dla kontenera.

Skrót flex - trzy wartości w jednej

Właściwość flex ustawia naraz trzy właściwości elementu flex, zawsze w tej samej kolejności:

• flex-grow określa, jak element ma się rozszerzać, gdy w kontenerze zostaje wolne miejsce,
• flex-shrink określa, jak element ma się kurczyć, gdy miejsca brakuje,
• flex-basis określa początkowy rozmiar elementu, zanim przeglądarka zacznie go rozszerzać lub kurczyć.

Formalny zapis z dokumentacji wygląda tak: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]. Pojedyncza pionowa kreska znaczy albo, znak zapytania oznacza wartość opcjonalną, a podwójna kreska mówi, że części mogą wystąpić w dowolnej kolejności. Mimo to trzymaj się porządku grow, shrink, basis, bo tak zapis czyta każdy programista. Zobaczmy skrót w działaniu:

.box {
  flex: 1 0 200px;
}

Element o klasie box dostaje flex-grow: 1, więc może się rozszerzać, flex-shrink: 0, więc nie może się kurczyć, oraz flex-basis: 200px, czyli zaczyna od 200 pikseli. Ani treść, ani HTML elementu się nie zmieniają, bo skrót ustawia wyłącznie zasady rozmiaru. Uważaj na jedno: element z flex-shrink: 0 nie zejdzie poniżej 200 pikseli, więc na wąskim ekranie może wystawać poza kontener.

Pominięte wartości

Skrót nie musi zawierać trzech wartości. Spotkasz też formy jedno- i dwuwyrazowe, takie jak flex: 1 czy flex: none. Pominięte części nie wracają jednak do zwykłych wartości domyślnych: flex: 1 ustawia flex-basis na 0, a nie na auto. Te formy rozbierzemy dokładnie w następnej lekcji.

Skrót flex-flow - kierunek i zawijanie razem

Drugi skrót dotyczy kontenera i łączy dwie właściwości, które już znasz. flex-direction określa kierunek, w jakim elementy są rozmieszczane w kontenerze, a flex-wrap decyduje, czy mają zawijać się do nowej linii, gdy brakuje miejsca. Formalny zapis to flex-flow: <'flex-direction'> || <'flex-wrap'>, a wartość domyślna to row nowrap. Oto przykład:

.container {
  flex-flow: column wrap;
}

Kontener o klasie container dostaje flex-direction: column, więc elementy układają się pionowo, oraz flex-wrap: wrap, więc przechodzą do nowej linii, gdy zabraknie miejsca. W kolumnie nowa linia to kolejna kolumna obok, a zawijanie zadziała dopiero wtedy, gdy kontener ma ograniczoną wysokość. Bez niej kolumna po prostu rośnie w dół. Najczęściej spotkasz jednak flex-flow: row wrap, czyli poziomy rząd, który zawija się jak kolejne półki w skarbcu.

Skrót a align-content

Gdy flex-flow zawiera wrap, w kontenerze powstaje kilka linii. Pamiętasz z poprzedniej lekcji, kto nimi rządzi? align-content rozmieszcza całe linie wzdłuż osi poprzecznej, podobnie jak justify-content rozmieszcza pojedyncze elementy wzdłuż osi głównej. Działa tylko w kontenerze z włączonym zawijaniem:

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  height: 400px;
}

Rzędy elementów zbierają się pośrodku wysokiego kontenera. Wysokość jest tu potrzebna, bo align-content rozdziela tylko wolne miejsce w osi poprzecznej. Elementy w obrębie jednego rzędu nadal ustawia align-items, a align-content przesuwa całe rzędy naraz.

Kiedy skracać?

Skrócone formy pozwalają zwięźlej opisać elastyczność i układ elementów, a kod CSS staje się czytelniejszy. Moja rada: po flex sięgaj zawsze, gdy ustawiasz więcej niż jedną z trzech wartości. Specyfikacja Flexboxa sama zaleca skrót zamiast osobnych właściwości, bo poprawnie ustawia także to, czego nie wpisałeś. Z flex-flow bywa różnie: gdy zmieniasz oba ustawienia, skrót jest wygodny, ale gdy chcesz tylko zawijania, samo flex-wrap: wrap powie więcej. W następnej lekcji rozbierzemy flex na części i policzymy, jak przeglądarka dzieli wolne miejsce.

W edytorze poniżej każdy rząd pokazuje inną wartość flex-basis. Zamień pary flex-basis i flex-grow na jeden skrót, na przykład flex: 1 1 100px, i sprawdź, że układ się nie zmienia.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox - Flex Basis</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Flex Basis - Bazowy rozmiar elementów</h1>
        <p class="subtitle">Określ początkowy rozmiar elementu przed rozdzieleniem przestrzeni</p>

        <section class="demo-section">
            <h2>flex-basis: auto (domyślnie)</h2>
            <div class="flex-container">
                <div class="flex-item basis-auto">Krótki</div>
                <div class="flex-item basis-auto">Dłuższy tekst w elemencie</div>
                <div class="flex-item basis-auto">Średni</div>
            </div>
            <p class="description">Rozmiar bazuje na zawartości elementu</p>
        </section>

        <section class="demo-section">
            <h2>flex-basis: 0</h2>
            <div class="flex-container">
                <div class="flex-item basis-zero grow">Krótki</div>
                <div class="flex-item basis-zero grow">Dłuższy tekst w elemencie</div>
                <div class="flex-item basis-zero grow">Średni</div>
            </div>
            <p class="description">Wszystkie elementy startują od zera i rosną równomiernie</p>
        </section>

        <section class="demo-section">
            <h2>flex-basis: Stałe wartości</h2>
            <div class="flex-container">
                <div class="flex-item basis-100">basis: 100px</div>
                <div class="flex-item basis-200">basis: 200px</div>
                <div class="flex-item basis-150">basis: 150px</div>
            </div>
            <p class="description">Każdy element ma określony bazowy rozmiar</p>
        </section>

        <section class="demo-section">
            <h2>flex-basis: Procenty</h2>
            <div class="flex-container">
                <div class="flex-item basis-25">25%</div>
                <div class="flex-item basis-50">50%</div>
                <div class="flex-item basis-25">25%</div>
            </div>
            <p class="description">Rozmiary bazowe w procentach kontenera</p>
        </section>

        <section class="demo-section">
            <h2>flex-basis + flex-grow</h2>
            <div class="flex-container">
                <div class="flex-item basis-100 grow">basis: 100px + grow: 1</div>
                <div class="flex-item basis-50 grow">basis: 50px + grow: 1</div>
                <div class="flex-item basis-100 grow">basis: 100px + grow: 1</div>
            </div>
            <p class="description">Elementy startują z różnych rozmiarów i rosną równomiernie</p>
        </section>

        <section class="demo-section practice">
            <h2>Praktyka: Egipskie pojemniki</h2>
            <p class="practice-description">Składujemy zboże w spichrzach o różnych rozmiarach bazowych</p>

            <div class="granary">
                <div class="storage small-storage">
                    <div class="lid">◓</div>
                    <div class="content">
                        <p>Mały spichlerz</p>
                        <p class="size">basis: 80px</p>
                    </div>
                </div>

                <div class="storage medium-storage">
                    <div class="lid">◓</div>
                    <div class="content">
                        <p>Średni spichlerz</p>
                        <p class="size">basis: 150px</p>
                    </div>
                </div>

                <div class="storage large-storage">
                    <div class="lid">◓</div>
                    <div class="content">
                        <p>Duży spichlerz</p>
                        <p class="size">basis: 220px</p>
                    </div>
                </div>

                <div class="storage flexible-storage">
                    <div class="lid">◓</div>
                    <div class="content">
                        <p>Elastyczny</p>
                        <p class="size">basis: 0 + grow: 1</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

Pamiętaj: skrót to pismo hieratyczne CSS, czyli te same znaczenia co w pełnym zapisie, tylko wyrażone szybciej i zwięźlej.