Poravnava fleks elementov vzdolž glavne osi v CSS

Lastnost justify-content omogoča poravnavo elementov vzdolž glavne osi. Prej ste že spoznali vrednosti center, space-between, space-around, space-evenly. Zdaj pa si poglejmo še nekaj drugih vrednosti.

Vrednost flex-start pritisne elemente na začetek glavne osi, vrednost flex-end pa na konec. Poglejmo si primere.

Primer

Usmerimo glavno os od leve proti desni z nastavitvijo lastnosti flex-direction na vrednost row. Pritisnimo bloke na začetek osi. Za to nastavimo justify-content na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: row; /* glavna os od leve proti desni */
	justify-content: flex-start; /* bloki na začetek glavne osi */
}

Rezultat izvajanja kode:

Primer

Zdaj pa pritisnimo bloke na konec osi. Za to nastavimo justify-content na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: row; /* glavna os od leve proti desni */
	justify-content: flex-end; /* bloki na konec glavne osi */
}

Rezultat izvajanja kode:

Primer

Zdaj usmerimo glavno os od desne proti levi z nastavitvijo lastnosti flex-direction na vrednost row-reverse. Pritisnimo bloke na začetek osi, to je na desni rob. Za to nastavimo justify-content na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* glavna os od desne proti levi */
	justify-content: flex-start; /* bloki na začetek glavne osi */
}

Rezultat izvajanja kode:

Primer

Zdaj pa pritisnimo bloke na konec glavne osi, to je na levi rob. Za to nastavimo justify-content na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* glavna os od desne proti levi */
	justify-content: flex-end; /* bloki na konec glavne osi */
}

Rezultat izvajanja kode:

Primer

V prejšnjih primerih je bila glavna os usmerjena vodoravno. Zdaj pa jo obrnimo in usmerimo navpično.

Usmerimo glavno os navzdol z nastavitvijo lastnosti flex-direction na vrednost column.

Pritisnimo bloke na začetek glavne osi, to je na zgornji rob. Za to nastavimo justify-content na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: column; /* glavna os od zgoraj navzdol */
	justify-content: flex-start; /* bloki na začetek glavne osi */
}

Rezultat izvajanja kode:

Primer

Zdaj pa pritisnimo bloke na konec glavne osi, to je na spodnji rob. Za to nastavimo justify-content na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: column; /* glavna os od zgoraj navzdol */
	justify-content: flex-end; /* bloki na konec glavne osi */
}

Rezultat izvajanja kode:

Primer

Obrnimo glavno os tako, da bo usmerjena od spodaj navzgor. Za to lastnosti flex-direction nastavimo vrednost column-reverse. V tem primeru se bo vrstni red blokov spremenil - na začetku osi bo stal zadnji blok v HTML kodi.

Pritisnimo bloke na začetek glavne osi, to je na spodnji rob. Za to nastavimo justify-content na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* glavna os od spodaj navzgor */
	justify-content: flex-start; /* bloki na začetek glavne osi */
}

Rezultat izvajanja kode:

Primer

Pritisnimo bloke na konec glavne osi, to je na zgornji rob. Za to nastavimo justify-content na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* glavna os od spodaj navzgor */
	justify-content: flex-end; /* bloki na konec glavne osi */
}

Rezultat izvajanja kode:

Praktične naloge

Ponovite stran po tem vzorcu: