Używanie właściwości justify-content, align-items

Używanie właściwości justify-content i align-items

Jedną z największych zalet Flexboxa jest możliwość precyzyjnego kontrolowania rozmieszczenia elementów wewnątrz kontenera – zarówno w poziomie, jak i pionie. Dwie właściwości, które za to odpowiadają, to:

• justify-content – steruje położeniem elementów względem osi głównej (domyślnie poziomej),
• align-items – steruje położeniem elementów względem osi poprzecznej (domyślnie pionowej).

Dzięki tym właściwościom możesz łatwo wyśrodkować elementy, rozłożyć je równomiernie, przyciągnąć do lewej lub prawej strony, a także ustawić je w pionie dokładnie tak, jak chcesz.

1. justify-content – wyrównywanie w poziomie

Właściwość justify-content decyduje o tym, jak elementy będą rozmieszczone wzdłuż osi głównej (czyli w poziomie, jeśli nie zmieniono flex-direction).

Dostępne wartości:

• flex-start – elementy ustawione przy lewej krawędzi (domyślnie),
• flex-end – elementy przy prawej krawędzi,
• center – elementy wyśrodkowane,
• space-between – pierwszy i ostatni przy krawędziach, pozostałe rozłożone równo,
• space-around – równomierne odstępy wokół każdego elementu,
• space-evenly – jednakowe odstępy między wszystkimi elementami (łącznie z krawędziami).

.flex-container {
  display: flex;
  justify-content: center;
}

Efekt działania: wszystkie elementy zostaną wyśrodkowane poziomo w kontenerze.

Sprawdź samodzielnie w JSFiddle:
👉 Otwórz JSFiddle i wstaw kod HTML z kilkoma elementami w kontenerze display: flex. Zmieniaj wartość justify-content i obserwuj, jak zmienia się rozmieszczenie.

2. align-items – wyrównywanie w pionie

Właściwość align-items steruje rozmieszczeniem elementów względem osi poprzecznej (domyślnie pionowej, czyli w pionie). Działa tylko wtedy, gdy kontener ma wysokość większą niż elementy.

Dostępne wartości:

• stretch – elementy rozciągają się do wysokości kontenera (domyślnie),
• flex-start – elementy wyrównane do góry,
• flex-end – elementy przy dolnej krawędzi kontenera,
• center – elementy wyśrodkowane w pionie,
• baseline – elementy wyrównane do linii bazowej tekstu.

.flex-container {
  display: flex;
  align-items: center;
  height: 200px;
}

Efekt działania: elementy będą wyśrodkowane w pionie wewnątrz kontenera o wysokości 200px.

Sprawdź działanie w JSFiddle:
Dodaj kilka prostokątnych <div> i testuj różne wartości align-items. Zmieniaj wysokość kontenera i elementów, aby zobaczyć różnice.

3. Łączenie justify-content i align-items

Największa moc Flexboxa pojawia się wtedy, gdy używasz obu właściwości razem. Przykład: idealne wycentrowanie elementów w pionie i poziomie:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Efekt działania: wszystkie elementy będą idealnie wyśrodkowane – zarówno w pionie, jak i poziomie.

Ćwiczenie:
W JSFiddle zbuduj kontener z 3 prostokątami. Dodaj im różne kolory, zmieniaj justify-content i align-items, a także rozmiar kontenera. Sprawdź, jak elementy zmieniają położenie w zależności od ustawień.

Dzięki tym właściwościom możesz zbudować dowolny układ – bez kombinowania z margin, position czy float. Flexbox daje Ci precyzję i prostotę w jednym.