Wyrównywanie elementów (align-items, justify-content)

Właściwości align-items i justify-content są kluczowe w modelu Flexbox (i również przydatne w Grid Layout), ponieważ pozwalają na precyzyjne kontrolowanie wyrównania elementów w osi głównej i osi poprzecznej. Dzięki nim można łatwo tworzyć czytelne i dobrze wyśrodkowane układy na stronie.

Wyrównywanie elementów w osi głównej

justify-content we Flexbox wyrównanie w osi głównej (domyślnie poziomej) osiągamy za pomocą justify-content. Możliwe wartości obejmują m.in.:

• flex-start - elementy są wyrównane do początku kontenera.
• flex-end - elementy są wyrównane do końca kontenera.
• center - elementy są wyśrodkowane.
• space-between - elementy są równomiernie rozłożone, z przestrzenią między nimi.
• space-around - elementy są rozłożone z równomierną przestrzenią wokół każdego elementu.

.container {
  display: flex;
  justify-content: space-between; /* Możesz tu wypróbować różne wartości */
}

Wyrównywanie elementów w osi poprzecznej – align-items

We Flexbox wyrównanie w osi poprzecznej (domyślnie pionowej) osiągamy za pomocą align-items. Przykładowe wartości:

• flex-start - elementy wyrównane do górnej krawędzi kontenera.
• flex-end - elementy wyrównane do dolnej krawędzi kontenera.
• center - elementy wyśrodkowane w pionie.
• stretch - elementy są rozciągane na całą wysokość kontenera (o ile nie mają ustalonej konkretnej wysokości).
• baseline - elementy są wyrównywane do linii bazowej tekstu.

.container {
  display: flex;
  align-items: center; /* Możesz tu wypróbować różne wartości */
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podusmowanie

Właściwości justify-content oraz align-items stanowią podstawę przy tworzeniu nowoczesnych, responsywnych układów w Flexbox (i w podobny sposób w Grid Layout). Pozwalają one na dokładne zarządzanie położeniem elementów, zwiększając czytelność i estetykę stron internetowych.