Flexbox (pełna nazwa: CSS Flexible Box Layout) to mechanizm układu w CSS, który pozwala rozmieszczać elementy wzdłuż jednej osi — w rzędzie albo w kolumnie — i sprytnie dzielić między nie dostępne miejsce. Włączasz go jedną deklaracją display: flex na elemencie-rodzicu (kontenerze), a jego dzieci stają się elastycznymi elementami, które same potrafią się wyrównać, rozciągnąć albo zwinąć.
Najważniejsze, żebyś to zapamiętał: Flexbox jest jednowymiarowy. Operujesz osią główną i osią poprzeczną, ale realnie układasz rzeczy w jednej linii (z opcją zawijania). Jeśli potrzebujesz pełnej siatki z wierszami i kolumnami naraz, to robota dla CSS Grid — Flexbox tu nie wygra.
W kontenerze ustawiasz kierunek osi przez flex-direction (row lub column), rozkład wzdłuż osi głównej przez justify-content, a wyrównanie w poprzek przez align-items. Odstępy między elementami daje gap. Po stronie dzieci masz flex-grow, flex-shrink i flex-basis (skrótowo flex), które decydują, jak element rośnie i kurczy się przy zmianie szerokości okna.
Przykład z praktyki
Klasyk: pasek nawigacji, gdzie logo ma być po lewej, a linki dosunięte do prawej. Zamiast kombinować z float i marginesami, dajesz na kontenerze:
display: flex; justify-content: space-between; align-items: center;
I tyle — logo ląduje z lewej, menu z prawej, oba wyśrodkowane w pionie. Drugi typowy patent to wyśrodkowanie elementu idealnie na środku rodzica: display: flex; justify-content: center; align-items: center;. Tym jednym trikiem zamykasz dyskusję „jak wyśrodkować diva”, która przez lata spędzała sen z powiek frontendowcom.
Częste błędy
Po pierwsze: ludzie mylą osie. Gdy zmienisz flex-direction na column, justify-content zaczyna działać w pionie, a align-items w poziomie — i nagle „nic nie działa”. To nie błąd, to zamiana ról osi.
Po drugie: align-items: stretch jest wartością domyślną, więc elementy potrafią rozciągnąć się na całą wysokość kontenera, choć tego nie chcesz. Po trzecie: do odstępów używaj gap, a nie marginesów na każdym dziecku — jest czytelniej i nie zostaje ci zbędny margines na końcu.
Pojęcia powiązane: CSS Grid, flex container i flex item, justify-content, align-items, flex-wrap, responsive web design (RWD), box model.