Jak ustawić właściwości flexbox?

Właściwości są ustawiane dla kontenera (elementu, do którego stosuje się display: flex lub display: inline-flex) oraz jego bezpośrednich potomków (elementów wewnątrz kontenera).

Właściwości dla kontenera:

• display: Określa, że element jest kontenerem flex. Możliwe wartości: flex (blokowy) i inline-flex (w linii).
• flex-direction: Ustawia kierunek głównej osi, w której układane są elementy flex. Możliwe wartości: row (domyślnie, od lewej do prawej), row-reverse (od prawej do lewej), column (od góry do dołu), column-reverse (od dołu do góry).
• flex-wrap: Kontroluje, czy elementy flex zawijają się w nowy wiersz, jeśli przekraczają granice kontenera. Możliwe wartości: nowrap (domyślnie, bez zawijania), wrap (zawijanie w nowy wiersz), wrap-reverse (zawijanie w odwrotnej kolejności).
• justify-content: Wyrównuje elementy flex wzdłuż głównej osi. Możliwe wartości: flex-start (początek kontenera), flex-end (koniec kontenera), center, space-between (równomierna przestrzeń między elementami, pierwszy na początku, ostatni na końcu), space-around (równomierna przestrzeń wokół każdego elementu).
• align-items: Wyrównuje elementy flex wzdłuż osi poprzecznej. Możliwe wartości: stretch (domyślnie, rozciąga elementy na wysokość kontenera), flex-start (początek kontenera), flex-end (koniec kontenera), center, baseline (wyrównanie do linii bazowej tekstu).
• align-content: Wyrównuje linie elementów flex (gdy używany jest flex-wrap) wzdłuż osi poprzecznej. Nie działa, jeśli jest tylko jedna linia. Możliwe wartości: stretch (domyślnie), flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Ustawiają odległość między elementami flex wzdłuż głównych i poprzecznych osi.

Właściwości dla elementów (bezpośrednich potomków kontenera flex):

• order: Określa kolejność ułożenia elementu w kontenerze. Domyślnie wszystkie mają order: 0. Elementy z mniejszą wartością order są umieszczane wcześniej.
• flex-grow: Określa, ile razy element może się powiększać w stosunku do innych, gdy jest dostępna wolna przestrzeń. Domyślnie 0 (nie powiększa się).
• flex-shrink: Określa, ile razy element może się zmniejszać w przypadku braku miejsca. Domyślnie 1 (zmniejsza się).
• flex-basis: Ustawia początkowy rozmiar elementu przed rozdzieleniem wolnej przestrzeni. Może być w pikselach, procentach lub auto. Domyślnie auto.
• flex: Skrót dla flex-grow, flex-shrink i flex-basis. Na przykład flex: 1 1 auto;.
• align-self: Nadpisuje wartość align-items dla pojedynczego elementu. Możliwe wartości: auto (używa wartości align-items rodzica), stretch, flex-start, flex-end, center, baseline.

Przykład:

.flex-container {
  display: flex; /* Tworzy kontener flex */
  flex-direction: row; /* Układa elementy w rzędzie */
  justify-content: center; /* Wyrównuje elementy do środka głównej osi */
  align-items: center; /* Wyrównuje elementy do środka osi poprzecznej */
  gap: 10px; /* Ustawia odstęp między elementami */
}

.flex-item {
  flex-grow: 1; /* Element może się powiększać */
  flex-basis: 100px; /* Początkowy rozmiar elementu */
}

.special-item {
  order: -1; /* Ten element będzie pierwszy */
  align-self: flex-end; /* Nadpisuje wyrównanie w osi poprzecznej dla tego elementu */
}