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:
.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:
.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:
.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:
.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:
.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:
.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:
