Wyrównywanie elementów flex wzdłuż osi głównej w CSS

Właściwość justify-content pozwala wyrównywać elementy wzdłuż osi głównej. Wcześniej poznaliście już wartości center, space-between, space-around, space-evenly. Teraz przyjrzyjmy się kilku kolejnym wartościom.

Wartość flex-start przyciska elementy do początku osi głównej, a wartość flex-end - do końca. Spójrzmy na przykłady.

Przykład

Skierujmy oś główną od lewej do prawej, ustawiając właściwości flex-direction wartość row. Przyciśnijmy bloki do początku osi. W tym celu justify-content ustawmy na wartość flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* oś główna od lewej do prawej */
  justify-content: flex-start; /* bloki do początku osi głównej */
}

Wynik wykonania kodu:

Przykład

Teraz przyciśnijmy bloki do końca osi. W tym celu justify-content ustawmy na wartość flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* oś główna od lewej do prawej */
  justify-content: flex-end; /* bloki do końca osi głównej */
}

Wynik wykonania kodu:

Przykład

Skierujmy teraz oś główną od prawej do lewej, ustawiając właściwości flex-direction wartość row-reverse. Przyciśnijmy bloki do początku osi, czyli do prawej krawędzi. W tym celu justify-content ustawmy na wartość flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* oś główna od prawej do lewej */
  justify-content: flex-start; /* bloki do początku osi głównej */
}

Wynik wykonania kodu:

Przykład

A teraz przyciśnijmy bloki do końca osi głównej, czyli do lewej krawędzi. W tym celu justify-content ustawmy na wartość flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* oś główna od prawej do lewej */
  justify-content: flex-end; /* bloki do końca osi głównej */
}

Wynik wykonania kodu:

Przykład

W poprzednich przykładach oś główna była skierowana poziomo. Obróćmy ją teraz i skierujmy pionowo.

Skierujmy oś główną w dół, ustawiając właściwości flex-direction wartość column.

Przyciśnijmy bloki do początku osi głównej, czyli do górnej krawędzi. W tym celu justify-content ustawmy na wartość flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* oś główna z góry na dół */
  justify-content: flex-start; /* bloki do początku osi głównej */
}

Wynik wykonania kodu:

Przykład

Teraz przyciśnijmy bloki do końca osi głównej, czyli do dolnej krawędzi. W tym celu justify-content ustawmy na wartość flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* oś główna z góry na dół */
  justify-content: flex-end; /* bloki do końca osi głównej */
}

Wynik wykonania kodu:

Przykład

Obróćmy oś główną, kierując ją od dołu do góry. W tym celu właściwości flex-direction nadajmy wartość column-reverse. W tym przypadku bloki zmienią swój porządek - na początku osi będzie stał ostatni w kodzie HTML blok.

Przyciśnijmy bloki do początku osi głównej, czyli do dolnej krawędzi. W tym celu justify-content ustawmy na wartość flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* oś główna od dołu do góry */
  justify-content: flex-start; /* bloki do początku osi głównej */
}

Wynik wykonania kodu:

Przykład

Przyciśnijmy bloki do końca osi głównej, czyli do górnej krawędzi. W tym celu justify-content ustawmy na wartość flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* oś główna od dołu do góry */
  justify-content: flex-end; /* bloki do końca osi głównej */
}

Wynik wykonania kodu: