Lista właściwości CSS Flexbox

Model układu Flexbox (Flexible Box) zapewnia bardziej wydajny sposób wyrównywania i rozmieszczania elementów w kontenerze, nawet gdy ich rozmiar jest nieznany lub dynamiczny.

Kontener Flex

Set on parent: display: flex; or display: inline-flex;

Właściwość	Opis	Typowe wartości
`flex-direction`	Kierunek osi głównej	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Czy zawijać wiersze	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Skrót dla kierunku i zawijania	`row wrap`
`justify-content`	Wyrównanie na osi głównej	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Wyrównanie na osi poprzecznej	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Wyrównanie wielu wierszy na osi poprzecznej	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Elementy Flex

Set on children:

Właściwość	Opis	Domyślnie
`order`	Kolejność wyświetlania (niższa wartość = wcześniej)	`0`
`flex-grow`	Współczynnik powiększania (gdy jest wolne miejsce)	`0`
`flex-shrink`	Współczynnik zmniejszania (gdy brakuje miejsca)	`1`
`flex-basis`	Rozmiar bazowy przed podziałem miejsca	`auto`
`flex`	Skrót dla grow, shrink i basis	`0 1 auto`
`align-self`	Pozwala na inne wyrównanie pojedynczego elementu	`auto`

Podstawowe pojęcia

Oś główna (Main Axis): Domyślnie pozioma, określana przez flex-direction.
Oś poprzeczna (Cross Axis): Kierunek prostopadły do osi głównej.

Przykłady zastosowań

Wyśrodkowanie w poziomie i pionie

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Równomierne rozłożenie szerokości

.item {
  flex: 1; /* Równomierne zajmowanie pozostałego miejsca */
}

Wyrównanie do krawędzi (Space Between)

.navbar {
  display: flex;
  justify-content: space-between;
}