Flexbox to fundamentalne narzędzie każdego frontend developera. Nauczysz się go w 15 minut i będziesz używać codziennie. Zapewniam.
Czym jest Flexbox?
Flexbox (Flexible Box Layout) to jednowymiarowy system układania elementów. Idealny do centrowania, nawigacji, kart produktów i wielu innych komponentów.
Główne właściwości Flexbox
Dla kontenera (parent):
- display: flex
- justify-content – wyrównanie na głównej osi
- align-items – wyrównanie na poprzecznej osi
- flex-direction – kierunek (row/column)
- flex-wrap – zawijanie elementów
Najczęstsze użycie – centrowanie
.container { display: flex; justify-content: center; align-items: center; }
To wszystko! Z tą wiedzą możesz już tworzyć większość layoutów. Flexbox to podstawa nowoczesnego CSS.