Zrozumieć Flexboxa
Shorthands - skrócona notacja
Trzy pełne wiedzy rozdziały już za nami! Przedstawię Ci teraz jak można zminimalizować liczbę reguł CSS przy tworzeniu layoutów na flexie, po czym przejdziemy już do faktycznego tworzenia layoutu.
Flex-flow
Przy tworzeniu layoutów z reguły chcemy zmienić domyślne zachowanie flexa, by elementy zawijały się do następnych linii bądź osie były ułożone w innym kierunku. Zamiast definiować osobno flex-direction oraz flex-wrap możemy wykorzystać flex-flow.
Składnia flex-flow wygląda następująco: flex-flow: <'flex-direction'> || <'flex-wrap'>;
To znaczy, że pierwszą wartością jaką nadajemy dla tej właściwości jest nasze flex-direction - czyli możemy mu nadać row, row-reverse, column, bądź column-reverse. Druga wartość to flex-wrap, czyli możemy wstawić tam nowrap, wrap bądź wrap-reverse.
Jeśli chcielibyśmy, aby nasz kontener układał elementy rzędami w kierunku z prawej do lewej oraz zawijał wiersze w naturalny sposób - możemy nadać naszemu rodzicowi flex-flow: row-reverse wrap;
Jest to ewkiwalent zapisu flex-direction: row-reverse; oraz flex-wrap: wrap, zapisany w jednej właściwości. Dodatkowo kolejność wartości nie ma znaczenia - przeglądarka sobie poradzi. To znaczy, że możemy równie dobrze zapisać to poprzez flex-direction: wrap row-reverse;. Natomiast preferowany jest zapis najpierw kierunek, potem zawijanie. Domyślną wartością dla flex-flow jest row nowrap - odpowiada ona domyślnym wartościom flex-direction oraz flex-wrap.
Analogicznie, możemy ustawić kierunek elementów tak, by układały się z góry do dołu, z zawijaniem elementów od prawej do lewej:
Podsumowując - flex-flow jest to shorthand do określania kierunku osi main-axis oraz cross-axis w kontenerze flexa. Jeśli chcesz zaoszczędzić pare linijek, śmiało możesz używać tej notacji, ale jeśli nie czujesz sie z nią pewnie - możesz używać pojedyczno flex-direction oraz flex-wrap - będą działały dokładnie tak samo.
Flex
Flex-flow jest właściwością przeznaczoną dla kontenerów flexa. Natomiast flex to skrót dla właściwości dziecka: flex-grow, flex-shrink oraz flex-basis.
Właściwość może przyjąć jedną, dwie, bądź trzy wartości. W przypadku zapisu z jedną wartością może zostać zinterpretowany na różne sposoby, w zależności od jej typu.
Jeśli nadamy mu tylko jedną wartość i będzie to liczba bez jednostek, wtedy zostanie ona zinterpretowana jako flex-grow. To znaczy, że ustawiając flex: 1; na selektorze .card każda nasza karta dostaje tak naprawdę flex-grow: 1;
W przypadku, kiedy będzie to wartość z jednostkami np. 100px, 100rem, 1cm, wartość procentowa bądź dowolna wartość zgodna ze składnią width lub height - zostanie potraktowane jako flex-basis.
Zamieńmy więc flex-basis: 100px; z selektora .card na flex: 100px;.
Super, nasze karty mają flex-basis: 100px;, chociaż są ustawiane niejawnie. Ostatnią poprawną wersją zapisu właściwości flex z jednym parametrem jest zapis ze słowami kluczowymi, jak auto, none czy np. initial.
Może to być wykorzystane do szybszego wyzerowania flex-basis, flex-grow i flex-shrink.
W przypadku zapisu z dwoma wartościami, pierwsza z nich musi zawsze reprezentować flex-grow - czyli być nieujemną liczbą rzeczywistą, bez jednostek. Jeśli w notacji druga wartość spełnia te same warunki - to znaczy, że ustawia flex-shrink.
Czyli notacja flex: 1 0; ustawi nam flex-grow: 1; oraz flex-shrink: 0;
W przeciwnym wypadku drugim parametrem musi być flex-basis. Czyli bez problemu możemy stworzyć taką regułę: flex: 0 100px;
Wtedy flex-grow ma wartość 0 (czyli tak naprawdę swoją wartość domyślną), a flex-basis - 100px.
W pełnym, trójwartościowym zapisie trzymamy się kolejnośći flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>;
Czyli zamiast ustawiać pojedynczo flex-grow: 0;, flex-basis: 50px; oraz flex-shrink: 0; wystarczy, że napiszemy flex: 0 0 50px;.
Jeśli zaprzyjaźnisz się z notacjami skróconymi, cały proces tworzenia layoutu strony na pewno trochę przyśpieszy. Dodatkowo mamy nieco krótszy kod źródłowy :)
To tyle jeśli chodzi o shorthands flexa. Pamiętaj, że flex-flow ustawiane jest na kontenerze-rodzicu flexboxa, natomiast flex - na dzieciach, elementach wewnątrz kontenera.
Oczywiście, często zdarzają się sytuacje, że dany element jest zarówno dzieckiem innego elementu o display: flex; oraz sam jest kontenerem dla kolejnych elementów - w ten sposób zagnieżdżamy flexa, co czasem może być kłopotliwe dla niektórych starszych przeglądarek.
To wszystko w tym ćwiczeniu. Przetestuj nowopoznane właściwości. Tymczasem zapraszam do kolejnego rozdziału - tworzenie faktycznego layoutu na flexie :)