CSS Flex elementu izlīdzināšana šķērsasī

Tagad izlīdzināsim blokus arī pa šķērsasī. Izlīdzināšanu pa šo asi norāda ar īpašību align-items. Vērtība flex-start piespiež elementus uz asi sākumu, bet vērtība flex-end - uz asi beigām.

Izmēģināsim to ar piemēriem.

Piemērs

Virzīsim galveno asi no kreisās puses uz labo. Šajā gadījumā šķērsass būs virzīta no augšas uz leju. Regulēsim mūsu bloku izvietojumu gan pa galveno asi, gan pa šķērsasi.

Pa galveno asi piespiežam blokus uz tās sākumu, tas ir, uz kreiso malu. Šim nolūkam justify-content iestatām uz vērtību flex-start. Pa šķērsasi arī piespiežam blokus uz tās sākumu, tas ir, uz augšējo malu. Šim nolūkam align-items arī iestatām uz vērtību flex-start.

Paskatīsimies, kas mums sanāk:

.parent {
	display: flex;
	flex-direction:  row;        /* galvenā ass uz labo pusi, šķērsass uz leju */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
	align-items:     flex-start; /* bloki uz šķērsass sākumu */
}

Koda izpildes rezultāts:

Piemērs

Tagad piespiežam blokus uz šķērsass beigām, tas ir, uz apakšu. Šim nolūkam align-items iestatām uz vērtību flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* galvenā ass uz labo pusi, šķērsass uz leju */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
	align-items:     flex-end;   /* bloki uz šķērsass beigām */
}

Koda izpildes rezultāts:

Piemērs

Tagad virzīsim galveno asi no augšas uz leju. Tā kā galvenā ass ir vertikāla, tad šķērsass būs virzīta no labās puses uz kreiso. Piespiežam blokus pa abām asīm uz to sākumiem:

.parent {
	display: flex;
	flex-direction:  column;     /* galvenā ass uz leju, šķērsass uz labo pusi */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
	align-items:     flex-start; /* bloki uz šķērsass sākumu */
}

Koda izpildes rezultāts:

Piemērs

Bet tagad pa šķērsasi piespiežam blokus uz tās beigām:

.parent {
	display: flex;
	flex-direction:  column;     /* galvenā ass uz leju, šķērsass uz labo pusi */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
	align-items:     flex-end;   /* bloki uz šķērsass beigām */
}

Koda izpildes rezultāts:

Piemērs

Piespiežam blokus uz abu asu beigām:

.parent {
	display: flex;
	flex-direction:  column;   /* galvenā ass uz leju, šķērsass uz labo pusi */
	justify-content: flex-end; /* bloki uz galvenās ass beigām */
	align-items:     flex-end; /* bloki uz šķērsass beigām */
}

Koda izpildes rezultāts:

Piemērs

Mainīsim galvenās ass virzienu - virzīsim to no apakšas uz augšu. Šajā gadījumā šķērsass nemainīs savu virzienu, jo galvenā ass joprojām ir vertikāla.

Piespiežam blokus uz abu asu sākumiem:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* galvenā ass uz augšu, šķērsass uz labo pusi */
	justify-content: flex-start;     /* bloki uz galvenās ass sākumu */
	align-items:     flex-start;     /* bloki uz šķērsass sākumu */
}

Koda izpildes rezultāts:

Praktiskie uzdevumi

Atkārtojiet lapu pēc šī parauga: