Poravnanje fleks elemenata duž glavne ose u CSS-u

Svojstvo justify-content omogućava poravnanje elemenata duž glavne ose. Prethodno ste već prošli vrednosti center, space-between, space-around, space-evenly. Hajde sada da izučimo još nekoliko vrednosti.

Vrednost flex-start pritišće elemente na početak glavne ose, a vrednost flex-end - na kraj. Hajde da pogledamo na primerima.

Primer

Usmerimo glavnu osu s leva na desno, zadajući svojstvu flex-direction vrednost row. Pritisnimo blokove na početak ose. Za ovo justify-content podesimo na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: row; /* glavna osa s leva na desno */
	justify-content: flex-start; /* blokovi na početak glavne ose */
}

Rezultat izvršenja koda:

Primer

Hajde sada da pritisnemo blokove na kraj ose. Za ovo justify-content podesimo na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: row; /* glavna osa s leva na desno */
	justify-content: flex-end; /* blokovi na kraj glavne ose */
}

Rezultat izvršenja koda:

Primer

Usmerimo sada glavnu osu s desna na levo, zadavši svojstvu flex-direction vrednost row-reverse. Pritisnimo blokove na početak ose, odnosno na desnu ivicu. Za ovo justify-content podesimo na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* glavna osa s desna na levo */
	justify-content: flex-start; /* blokovi na početak glavne ose */
}

Rezultat izvršenja koda:

Primer

A sada hajde da pritisnemo blokove na kraj glavne ose, odnosno na levu ivicu. Za ovo justify-content podesimo na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* glavna osa s desna na levo */
	justify-content: flex-end; /* blokovi na kraj glavne ose */
}

Rezultat izvršenja koda:

Primer

U prethodnim primerima glavna osa je bila usmerena horizontalno. Hajde sada da je okrenemo i usmerimo vertikalno.

Hajde da usmerimo glavnu osu nadole, zadajući svojstvu flex-direction vrednost column.

Pritisnimo blokove na početak glavne ose, odnosno na gornju ivicu. Za ovo justify-content podesimo na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: column; /* glavna osa odozgo nadole */
	justify-content: flex-start; /* blokovi na početak glavne ose */
}

Rezultat izvršenja koda:

Primer

Hajde sada da pritisnemo blokove na kraj glavne ose, odnosno na donju ivicu. Za ovo justify-content podesimo na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: column; /* glavna osa odozgo nadole */
	justify-content: flex-end; /* blokovi na kraj glavne ose */
}

Rezultat izvršenja koda:

Primer

Okrenimo glavnu osu, usmerivši je odozdo nagore. Za ovo svojstvu flex-direction zadajmo vrednost column-reverse. U ovom slučaju blokovi će promeniti svoj redosled - na početku ose će stajati poslednji u HTML kodu blok.

Hajde da pritisnemo blokove na početak glavne ose, odnosno na donju ivicu. Za ovo justify-content podesimo na vrednost flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* glavna osa odozdo nagore */
	justify-content: flex-start; /* blokovi na početak glavne ose */
}

Rezultat izvršenja koda:

Primer

Hajde da pritisnemo blokove na kraj glavne ose, odnosno na gornju ivicu. Za ovo justify-content podesimo na vrednost flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* glavna osa odozdo nagore */
	justify-content: flex-end; /* blokovi na kraj glavne ose */
}

Rezultat izvršenja koda:

Praktični zadaci

Ponovite stranicu prema datom uzorku: