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