CSS Flexbox: Twój Najlepszy Przyjaciel

Przez wiele lat programiści cierpieli, próbując ułożyć elementy obok siebie na stronie za pomocą float: left. Pływające bloki sypały się na potęgę. Aż przyszedł Flexbox, czyli "Elastyczne Pudełka". Opanowanie go to przepustka do bezstresowego układania klocków na arkuszu INF.03.

Uruchamianie Flexboxa

Flex działa zawsze na rodzicu. Jeśli masz kontener (np. div), który ma w sobie 3 przyciski, nakładasz flex na tego diva:

.kontener {
    display: flex;
}

Tylko to jedno polecenie natychmiast ułoży wszystkie dzieci (przyciski) w jednym, poziomym rzędzie obok siebie!

Układanie klocków

Gdy uaktywnisz display: flex;, otrzymujesz magiczne uprawnienia do sterowania elementami w pionie i poziomie:

1. justify-content (W osi głównej - poziomej) Odpowiada za przestrzeń międzu elementami:

• flex-start – Wszystko do lewej (domyślnie).
• flex-end – Wszystko do prawej.
• center – Wyśrodkowanie na środku ekranu.
• space-between – Pierwszy element dosunięty na maxa w lewo, ostatni w prawo, a środek ma równe odstępy. (CKE to uwielbia w paskach nawigacji!).
• space-evenly – Równe odstępy ze wszystkich stron elementów.

2. align-items (W osi prostopadłej - pionowej)

• flex-start – Dociska do sufitu.
• flex-end – Dociska do podłogi.
• center – Wyśrodkowuje wertykalnie! Koniec z próbami wyliczania idealnego paddingu, żeby tekst był na środku guzika w pionie. To robi to idealnie.

Zmiana kierunku

Co, jeśli chcesz, by elementy znowu ułożyły się z góry na dół (jak na telefonach), ale chcesz zachować wyśrodkowanie ze względu na flex? Zmieniasz oś:

.kontener {
    display: flex;
    flex-direction: column; /* Ustawia elementy w kolumnie (z góry na dół) */
}

flex-wrap (Zawijanie wierszy)

Zazwyczaj flex próbuje ścisnąć elementy na siłę w jednym rzędzie, ignorując ich szerokość. Jeśli to jest galeria zdjęć i chcesz, by zdjęcia przeszły do drugiego rzędu, gdy brakuje miejsca:

.galeria {
    display: flex;
    flex-wrap: wrap; /* Pozwala na tworzenie nowych rzędów */
}

Flexbox to bezdyskusyjnie najszybszy sposób na zrealizowanie 99% poleceń dotyczących układu bloków na egzaminie. Zamiast męczyć się z pozycjonowaniem i procentami szerokości, powiedz display: flex!