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

Teraz zajmijmy się wyrównywaniem bloków wzdłuż osi poprzecznej. Wyrównanie wzdłuż tej osi jest określane za pomocą właściwości align-items. Wartość flex-start przyciska elementy do początku osi, a wartość flex-end - do końca.

Sprawdźmy to na przykładach.

Przykład

Skierujmy oś główną od lewej do prawej. W tym przypadku oś poprzeczna będzie skierowana od góry do dołu. Dostosujmy położenie naszych bloków zarówno wzdłuż osi głównej, jak i poprzecznej.

Wzdłuż osi głównej przyciśnijmy bloki do jej początku, czyli do lewej krawędzi. W tym celu ustawmy justify-content na wartość flex-start. Wzdłuż osi poprzecznej również przyciśnijmy bloki do jej początku, czyli do górnej krawędzi. W tym celu ustawmy align-items również na wartość flex-start.

Zobaczmy, co otrzymamy:

css.parent {
  display: flex;
  flex-direction:  row;        /* oś główna w prawo, poprzeczna w dół */
  justify-content: flex-start; /* bloki do początku osi głównej */
  align-items:     flex-start; /* bloki do początku osi poprzecznej */
}

Wynik wykonania kodu:

Przykład

Teraz przyciśnijmy bloki do końca osi poprzecznej, czyli do dołu. W tym celu ustawmy align-items na wartość flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* oś główna w prawo, poprzeczna w dół */
  justify-content: flex-start; /* bloki do początku osi głównej */
  align-items:     flex-end;   /* bloki do końca osi poprzecznej */
}

Wynik wykonania kodu:

Przykład

Skierujmy teraz oś główną z góry na dół. Ponieważ oś główna jest pionowa, oś poprzeczna będzie skierowana od prawej do lewej. Przyciśnijmy bloki wzdłuż obu osi do ich początków:

css.parent {
  display: flex;
  flex-direction:  column;     /* oś główna w dół, poprzeczna w prawo */
  justify-content: flex-start; /* bloki do początku osi głównej */
  align-items:     flex-start; /* bloki do początku osi poprzecznej */
}

Wynik wykonania kodu:

Przykład

A teraz wzdłuż osi poprzecznej przyciśnijmy bloki do jej końca:

css.parent {
  display: flex;
  flex-direction:  column;     /* oś główna w dół, poprzeczna w prawo */
  justify-content: flex-start; /* bloki do początku osi głównej */
  align-items:     flex-end;   /* bloki do końca osi poprzecznej */
}

Wynik wykonania kodu:

Przykład

Przyciśnijmy bloki do końca obu osi:

css.parent {
  display: flex;
  flex-direction:  column;   /* oś główna w dół, poprzeczna w prawo */
  justify-content: flex-end; /* bloki do końca osi głównej */
  align-items:     flex-end; /* bloki do końca osi poprzecznej */
}

Wynik wykonania kodu:

Przykład

Zmieńmy kierunek osi głównej - skierujmy ją od dołu do góry. Przy tym oś poprzeczna nie zmieni swojego kierunku, ponieważ oś główna nadal jest pionowa.

Przyciśnijmy bloki do początku obu osi:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* oś główna w górę, poprzeczna w prawo */
  justify-content: flex-start;     /* bloki do początku osi głównej */
  align-items:     flex-start;     /* bloki do początku osi poprzecznej */
}

Wynik wykonania kodu: