Kurs HTML

Wyrównanie wzdłuż osi głównej

Właściwość justify-content jest stosowana do **kontenera flex** i definiuje, jak elementy flex są **rozmieszczone i wyrównane wzdłuż osi głównej (main axis)**.

Pozwala ona kontrolować dystrybucję wolnej przestrzeni pozostałej w kontenerze wzdłuż osi głównej, gdy suma rozmiarów elementów flex jest mniejsza niż rozmiar kontenera w tym kierunku.

Pamiętaj, że oś główna jest pozioma przy flex-direction: row (domyślnie) i pionowa przy flex-direction: column. Zatem justify-content kontroluje wyrównanie **poziome** dla wierszy i **pionowe** dla kolumn.

Możliwe wartości justify-content

Właściwość justify-content może przyjmować kilka wartości:

1. flex-start (wartość domyślna):

   • Elementy są pakowane na początku osi głównej (po lewej przy row, na górze przy column).
   • Cała wolna przestrzeń znajduje się na końcu osi głównej.

   .container { display: flex; justify-content: flex-start; /* Domyślne */ }

   <!-- Przy row: [1][2][3]      -->
   <!-- Przy column: -->
   <!-- [1] -->
   <!-- [2] -->
   <!-- [3] -->
   <!--     -->
   <!--     -->

2. flex-end:

   • Elementy są pakowane na końcu osi głównej (po prawej przy row, na dole przy column).
   • Cała wolna przestrzeń znajduje się na początku osi głównej.

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

   <!-- Przy row:      [1][2][3] -->
   <!-- Przy column: -->
   <!--     -->
   <!--     -->
   <!-- [1] -->
   <!-- [2] -->
   <!-- [3] -->

3. center:

   • Elementy są grupowane na środku osi głównej.
   • Wolna przestrzeń jest równo rozdzielana na początku i na końcu osi głównej.

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

   <!-- Przy row:   [1][2][3]   -->
   <!-- Przy column: -->
   <!--     -->
   <!-- [1] -->
   <!-- [2] -->
   <!-- [3] -->
   <!--     -->

4. space-between:

   • Pierwszy element jest na początku osi głównej, ostatni na końcu.
   • Pozostała wolna przestrzeń jest równo rozdzielana **pomiędzy** elementami.
   • Brak przestrzeni przed pierwszym i za ostatnim elementem.

   .container { display: flex; justify-content: space-between; }

   <!-- Przy row: [1]   [2]   [3] -->
   <!-- Przy column: -->
   <!-- [1] -->
   <!--     -->
   <!-- [2] -->
   <!--     -->
   <!-- [3] -->

5. space-around:

   • Wolna przestrzeń jest równo rozdzielana **wokół** każdego elementu.
   • Odstępy między elementami są dwa razy większe niż odstęp przed pierwszym i za ostatnim elementem (bo każdy element "wnosi" połowę odstępu z każdej strony).

   .container { display: flex; justify-content: space-around; }

   <!-- Przy row:  [1]   [2]   [3]  -->
   <!-- Przy column: -->
   <!--     -->
   <!-- [1] -->
   <!--     -->
   <!--     -->
   <!-- [2] -->
   <!--     -->
   <!--     -->
   <!-- [3] -->
   <!--     -->

6. space-evenly:

   • Wolna przestrzeń jest równo rozdzielana **pomiędzy** każdym elementem oraz **przed pierwszym i za ostatnim** elementem.
   • Wszystkie odstępy (przed pierwszym, między elementami, za ostatnim) są równe.

   .container { display: flex; justify-content: space-evenly; }

   <!-- Przy row:  [1]  [2]  [3]  -->
   <!-- Przy column: -->
   <!--     -->
   <!-- [1] -->
   <!--     -->
   <!-- [2] -->
   <!--     -->
   <!-- [3] -->
   <!--     -->

Wizualizacja (dla flex-direction: row):

(Powyżej znajduje się prosta wizualizacja działania różnych wartości justify-content przy flex-direction: row.)