Flexbox w CSS
Flexbox (Flexible Box Layout) to nowoczesny model układu w CSS, zaprojektowany do łatwego tworzenia elastycznych, responsywnych układów. Jest szczególnie przydatny do rozmieszczania elementów w jednym wymiarze (rząd lub kolumna), z możliwością ich wyrównywania i dopasowywania rozmiarów.
1. Podstawy flexboxa – display: flex
Aby włączyć tryb flexboxa, ustawiamy display: flex na elemencie rodzicu.
Dzieci stają się wtedy elementami flex (flex items).
- Rodzic = flex container
- Dzieci = flex items
Można też użyć display: inline-flex, aby kontener zachowywał się jak element inline, ale wewnątrz nadal działał flexbox.
2. Kierunek osi – flex-direction
Flexbox opiera się na dwóch osiach:
- główna (main axis) – ustawiana przez
flex-direction, - poprzeczna (cross axis) – prostopadła do osi głównej.
Wartości flex-direction:
row(domyślnie) – elementy w rzędzie, od lewej do prawej,row-reverse– rząd od prawej do lewej,column– elementy w kolumnie, od góry do dołu,column-reverse– kolumna od dołu do góry.
3. Wyrównywanie wzdłuż osi
a) justify-content (oś główna)
Kontroluje rozmieszczenie elementów wzdłuż osi głównej:
flex-start(domyślnie) – do początku osi,flex-end– do końca,center– wyśrodkowane,space-between– pierwszy element do początku, ostatni do końca, reszta rozłożona,space-around– równe odstępy z obu stron każdego elementu,space-evenly– równe odstępy pomiędzy wszystkimi elementami.
b) align-items (oś poprzeczna)
Kontroluje pozycję elementów w poprzek osi głównej:
stretch(domyślne) – elementy rozciągają się na całą wysokość kontenera,flex-start– do początku osi poprzecznej,flex-end– do końca osi,center– wyśrodkowanie,baseline– wyrównanie do linii bazowej tekstu.
c) align-self (dla pojedynczego elementu)
Pozwala nadpisać align-items tylko dla jednego dziecka.
d) align-content (dla wielu wierszy)
Działa, gdy elementy zawijają się (flex-wrap: wrap). Kontroluje rozmieszczenie całych linii elementów.
flex-start,flex-end,center,space-between,space-around,stretch.
4. Rozciąganie i dopasowanie elementów
Każdy element flex może być kontrolowany trzema właściwościami:
a) flex-grow
Określa, czy i jak bardzo element rośnie, aby wypełnić wolną przestrzeń.
0(domyślnie) – element nie rośnie,1– element rośnie proporcjonalnie, jeśli jest miejsce.
Jeśli kilka elementów ma flex-grow, przestrzeń jest dzielona proporcjonalnie.
b) flex-shrink
Określa, czy i jak bardzo element kurczy się, gdy brakuje miejsca.
1(domyślnie) – element może się kurczyć,0– element nie zmniejszy się.
c) flex-basis
Określa bazowy rozmiar elementu przed działaniem flex-grow i flex-shrink.
Może być w px, % lub auto.
d) Skrót flex
Łączy trzy powyższe właściwości:
Najczęściej stosowane skróty:
flex: 1;→ rośnie i zajmuje dostępne miejsce,flex: 0 0 auto;→ nie rośnie, nie kurczy się, rozmiar wg contentu.
5. Praktyczne układy z flexboxem
a) Centrowanie w pionie i poziomie
Elementy wyśrodkowane idealnie w oknie.
b) Menu nawigacyjne
Logo z lewej, linki z prawej, wyśrodkowane pionowo.