Czym jest Flexbox?

Flexbox (Flexible Box Layout) to moduł CSS zaprojektowany do tworzenia złożonych i responsywnych układów. Umożliwia zarządzanie rozmieszczeniem, wyrównaniem i dystrybucją przestrzeni między elementami kontenera, nawet jeśli ich rozmiary są nieznane lub dynamiczne.

Podstawowe koncepcje Flexbox:

• Oś główna (main axis): oś, wzdłuż której rozmieszczone są elementy. Domyślnie pozioma (z lewej na prawo).
• Oś poprzeczna (cross axis): oś prostopadła do osi głównej. Domyślnie pionowa (z góry na dół).
• Kontener (flex container): element, do którego stosuje się właściwości Flexbox (display: flex lub display: inline-flex).
• Elementy (flex items): elementy potomne kontenera.

Właściwości dla kontenera Flex:

• display: flex lub inline-flex
• flex-direction: określa kierunek osi głównej (row, row-reverse, column, column-reverse)
• flex-wrap: określa, czy elementy będą zawijane na nową linię (nowrap, wrap, wrap-reverse)
• justify-content: wyrównanie elementów wzdłuż osi głównej (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: wyrównanie elementów wzdłuż osi poprzecznej (flex-start, flex-end, center, baseline, stretch)
• align-content: wyrównanie linii lub kolumn wzdłuż osi poprzecznej w kontenerze wieloliniowym (flex-start, flex-end, center, space-between, space-around, stretch)

Właściwości dla elementów Flex:

• order: określa kolejność elementu w kontenerze
• flex-grow: określa, jak bardzo element powinien rosnąć, aby zająć dostępne miejsce
• flex-shrink: określa, jak bardzo element powinien się kurczyć, jeśli miejsca jest za mało
• flex-basis: określa początkowy rozmiar elementu przed rozdzieleniem przestrzeni
• flex: skrócona właściwość dla flex-grow, flex-shrink i flex-basis
• align-self: nadpisuje wyrównanie elementu wzdłuż osi poprzecznej (flex-start, flex-end, center, baseline, stretch, auto)

Przykład użycia:

/* Kontener */
.container {
  display: flex; /* Aktywuje Flexbox */
  flex-direction: row; /* Układ w linii */
  justify-content: center; /* Wyśrodkowanie poziome */
  align-items: center; /* Wyśrodkowanie pionowe */
  height: 200px; /* Wysokość kontenera */
  border: 1px solid black;
}

/* Elementy */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox znacznie upraszcza tworzenie responsywnych układów w porównaniu z tradycyjnymi metodami (float, inline-block, table).