Flex-elementide joondamine põhiteljel CSS-is

Omadus justify-content võimaldab elemente põhiteljel joondada. Varem oled juba läbinud väärtused center, space-between, space-around, space-evenly. Uurime nüüd veel mõnda väärtust.

Väärtus flex-start surub elemendid põhitelje algusesse, aga väärtus flex-end - lõppu. Vaatame näidetel.

Näide

Suuname põhitelje vasakult paremale, andes omadusele flex-direction väärtuseks row. Surume plokid telje algusesse. Selleks justify-content seame väärtuseks flex-start:

.parent {
	display: flex;
	flex-direction: row; /* põhitelg vasakult paremale */
	justify-content: flex-start; /* plokid põhitelje algusesse */
}

Koodi täitmise tulemus:

Näide

Surume nüüd plokid telje lõppu. Selleks justify-content seame väärtuseks flex-end:

.parent {
	display: flex;
	flex-direction: row; /* põhitelg vasakult paremale */
	justify-content: flex-end; /* plokid põhitelje lõppu */
}

Koodi täitmise tulemus:

Näide

Suuname nüüd põhitelje paremalt vasakule, andes omadusele flex-direction väärtuse row-reverse. Surume plokid telje algusesse, see tähendab paremasse serva. Selleks justify-content seame väärtuseks flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* põhitelg paremalt vasakule */
	justify-content: flex-start; /* plokid põhitelje algusesse */
}

Koodi täitmise tulemus:

Näide

Nüüd aga surume plokid põhitelje lõppu, see tähendab vasakusse serva. Selleks justify-content seame väärtuseks flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* põhitelg paremalt vasakule */
	justify-content: flex-end; /* plokid põhitelje lõppu */
}

Koodi täitmise tulemus:

Näide

Eelmistes näidetes oli põhitelg suunatud horisontaalselt. Pöörame nüüd selle vertikaalselt.

Suuname põhitelje alla, andes omadusele flex-direction väärtuse column.

Surume plokid põhitelje algusesse, see tähendab ülemisse serva. Selleks justify-content seame väärtuseks flex-start:

.parent {
	display: flex;
	flex-direction: column; /* põhitelg ülevalt alla */
	justify-content: flex-start; /* plokid põhitelje algusesse */
}

Koodi täitmise tulemus:

Näide

Surume nüüd plokid põhitelje lõppu, see tähendab alumisse serva. Selleks justify-content seame väärtuseks flex-end:

.parent {
	display: flex;
	flex-direction: column; /* põhitelg ülevalt alla */
	justify-content: flex-end; /* plokid põhitelje lõppu */
}

Koodi täitmise tulemus:

Näide

Pöörame põhitelje, suunates selle alt üles. Selleks omadusele flex-direction andke väärtus column-reverse. Sellisel juhul muudavad plokid oma järjekorda - telje alguses on HTML koodis viimane plokk.

Surume plokid põhitelje algusesse, see tähendab alumisse serva. Selleks justify-content seame väärtuseks flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* põhitelg alt üles */
	justify-content: flex-start; /* plokid põhitelje algusesse */
}

Koodi täitmise tulemus:

Näide

Surume plokid põhitelje lõppu, see tähendab ülemisse serva. Selleks justify-content seame väärtuseks flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* põhitelg alt üles */
	justify-content: flex-end; /* plokid põhitelje lõppu */
}

Koodi täitmise tulemus:

Praktilised ülesanded

Korrake lehte selle näidise järgi: