Do czego służy Flexbox?

Flexbox jest używany do tworzenia elastycznych i responsywnych układów w CSS. Umożliwia łatwe wyrównanie i rozkład elementów wewnątrz kontenera, automatycznie dostosowując ich rozmiar i pozycję w zależności od dostępnej przestrzeni.

Podstawowe koncepcje Flexbox:

• Kontener Flex: Element, do którego stosuje się display: flex; lub display: inline-flex;. Zawiera elementy flex.
• Elementy Flex: Bezpośrednie potomki kontenera flex.

Flexbox pozwala kontrolować:

• Kierunek ułożenia elementów (flex-direction).
• Zawijanie elementów na następną linię/kolumnę (flex-wrap).
• Wyrównanie elementów wzdłuż głównej osi (justify-content).
• Wyrównanie elementów wzdłuż osi poprzecznej (align-items dla pojedynczych elementów i align-content dla wielu linii/kolumn).
• Kolejność wyświetlania elementów (order).
• Rozkład wolnej przestrzeni między elementami (flex-grow, flex-shrink, flex-basis).

Przykład podstawowego użycia:

.kontener {
  display: flex;
  justify-content: center; /* Wyrównanie do środka poziomo */
  align-items: center; /* Wyrównanie do środka pionowo */
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="kontener">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>