Flexbox (Flexible Box Layout) to model układu CSS, który rozmieszcza elementy w jednym kierunku, w wierszu lub kolumnie, i pozwala łatwo wyrównywać je, rozciągać oraz rozdzielać wolną przestrzeń.
Jak włączyć Flexbox?
Wystarczy dodać kontenerowi display: flex;. Jego bezpośrednie dzieci stają się elementami flex, a kierunek, wyrównanie i odstępy ustawia się właściwościami takimi jak flex-direction, justify-content i align-items.
Do czego służy Flexbox?
Do pasków nawigacji, rzędów kart, centrowania elementów w pionie i poziomie oraz układów, które mają dopasować się do dostępnego miejsca.
Flexbox a CSS Grid
Flexbox układa elementy w jednym wymiarze, a Grid w dwóch jednocześnie, czyli w wierszach i kolumnach. Często używa się ich razem.
Najczęściej używane właściwości to justify-content i align-items, które sterują układem wzdłuż osi głównej i poprzecznej, oraz gap do odstępów.
Flexbox układa elementy w jednym wymiarze.