Flex-kastide joondamine ristsuunas CSS-is

Nüüd joondame kaste ka ristsuunas. Selle telje joondamine määratakse omadusega align-items. Väärtus flex-start surub elemendid telje algusesse, aga väärtus flex-end - lõppu.

Proovime näidete varal.

Näide

Suuname põhitelje vasakult paremale. Sel juhul on ristsuund ülevalt alla. Reguleerime oma kastide asukohta nii põhi- kui ka ristsuunas.

Põhisuunas surume kastid selle algusesse, see tähendab vasakusse serva. Selleks justify-content seatakse väärtusele flex-start. Ristsuunas surume kastid samuti selle algusesse, see tähendab ülemisse serva. Selleks align-items seatakse samuti väärtusele flex-start.

Vaatame, mis meil saab:

.parent {
	display: flex;
	flex-direction:  row;        /* põhitelg paremale, ristsuund alla */
	justify-content: flex-start; /* kastid põhisuuna algusesse */
	align-items:     flex-start; /* kastid ristsuuna algusesse */
}

Koodi täitmise tulemus:

Näide

Nüüd surume kastid ristsuuna lõppu, see tähendab alla. Selleks align-items seatakse väärtusele flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* põhitelg paremale, ristsuund alla */
	justify-content: flex-start; /* kastid põhisuuna algusesse */
	align-items:     flex-end;   /* kastid ristsuuna lõppu */
}

Koodi täitmise tulemus:

Näide

Suuname nüüd põhitelje ülevalt alla. Kuna põhitelg on vertikaalne, siis ristsuund on paremalt vasakule. Surume kastid mölemas suunas nende algusesse:

.parent {
	display: flex;
	flex-direction:  column;     /* põhitelg alla, ristsuund paremale */
	justify-content: flex-start; /* kastid põhisuuna algusesse */
	align-items:     flex-start; /* kastid ristsuuna algusesse */
}

Koodi täitmise tulemus:

Näide

Nüüd aga ristsuunas surume kastid selle lõppu:

.parent {
	display: flex;
	flex-direction:  column;     /* põhitelg alla, ristsuund paremale */
	justify-content: flex-start; /* kastid põhisuuna algusesse */
	align-items:     flex-end;   /* kastid ristsuuna lõppu */
}

Koodi täitmise tulemus:

Näide

Surume kastid mölema suuna lõppu:

.parent {
	display: flex;
	flex-direction:  column;   /* põhitelg alla, ristsuund paremale */
	justify-content: flex-end; /* kastid põhisuuna lõppu */
	align-items:     flex-end; /* kastid ristsuuna lõppu */
}

Koodi täitmise tulemus:

Näide

Muudame põhisuuna suunda - suuname selle alt üles. Sel juhul ristsuund ei muuda oma suunda, sest põhisuund on endiselt vertikaalne.

Surume kastid mölema suuna algusesse:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* põhitelg üles, ristsuund paremale */
	justify-content: flex-start;     /* kastid põhisuuna algusesse */
	align-items:     flex-start;     /* kastid ristsuuna algusesse */
}

Koodi täitmise tulemus:

Praktilised ülesanded

Korrake lehte järgmise näidise järgi: