Flex elementu izlīdzināšana pa galveno asi CSS

Īpašība justify-content ļauj izlīdzināt elementus pa galveno asi. Iepriekš jūs jau esat apguvis vērtības center, space-between, space-around, space-evenly. Tagad apgūsim vēl dažas vērtības.

Vērtība flex-start piespiež elementus uz sākumu galvenās ass, bet vērtība flex-end - uz beigām. Apskatīsim to ar piemēriem.

Piemērs

Virzīsim galveno asi no kreisās puses uz labo, iestatot īpašībai flex-direction vērtību row. Piespiedīsim blokus uz ass sākumu. Šim nolūkam justify-content iestatīsim uz vērtību flex-start:

.parent {
	display: flex;
	flex-direction: row; /* galvenā ass no kreisās uz labo */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
}

Koda izpildes rezultāts:

Piemērs

Tagad piespiedīsim blokus uz ass beigām. Šim nolūkam justify-content iestatīsim uz vērtību flex-end:

.parent {
	display: flex;
	flex-direction: row; /* galvenā ass no kreisās uz labo */
	justify-content: flex-end; /* bloki uz galvenās ass beigām */
}

Koda izpildes rezultāts:

Piemērs

Tagad virzīsim galveno asi no labās puses uz kreiso, iestatot īpašībai flex-direction vērtību row-reverse. Piespiedīsim blokus uz ass sākumu, tas ir, uz labo malu. Šim nolūkam justify-content iestatīsim uz vērtību flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* galvenā ass no labās uz kreiso */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
}

Koda izpildes rezultāts:

Piemērs

Tagad piespiedīsim blokus uz galvenās ass beigām, tas ir, uz kreiso malu. Šim nolūkam justify-content iestatīsim uz vērtību flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* galvenā ass no labās uz kreiso */
	justify-content: flex-end; /* bloki uz galvenās ass beigām */
}

Koda izpildes rezultāts:

Piemērs

Iepriekšējos piemēros galvenā ass bija vērsta horizontāli. Tagad apgriezīsim to un virzīsim vertikāli.

Virzīsim galveno asi uz leju, iestatot īpašībai flex-direction vērtību column.

Piespiedīsim blokus uz galvenās ass sākumu, tas ir, uz augšējo malu. Šim nolūkam justify-content iestatīsim uz vērtību flex-start:

.parent {
	display: flex;
	flex-direction: column; /* galvenā ass no augšas uz leju */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
}

Koda izpildes rezultāts:

Piemērs

Tagad piespiedīsim blokus uz galvenās ass beigām, tas ir, uz apakšējo malu. Šim nolūkam justify-content iestatīsim uz vērtību flex-end:

.parent {
	display: flex;
	flex-direction: column; /* galvenā ass no augšas uz leju */
	justify-content: flex-end; /* bloki uz galvenās ass beigām */
}

Koda izpildes rezultāts:

Piemērs

Apgriezīsim galveno asi, virzot to no apakšas uz augšu. Šim nolūkam īpašībai flex-direction piešķirsim vērtību column-reverse. Šajā gadījumā bloki mainīs savu kārtību - ass sākumā atradīsies pēdējais HTML kodā esošais bloks.

Piespiedīsim blokus uz galvenās ass sākumu, tas ir, uz apakšējo malu. Šim nolūkam justify-content iestatīsim uz vērtību flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* galvenā ass no apakšas uz augšu */
	justify-content: flex-start; /* bloki uz galvenās ass sākumu */
}

Koda izpildes rezultāts:

Piemērs

Piespiedīsim blokus uz galvenās ass beigām, tas ir, uz augšējo malu. Šim nolūkam justify-content iestatīsim uz vērtību flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* galvenā ass no apakšas uz augšu */
	justify-content: flex-end; /* bloki uz galvenās ass beigām */
}

Koda izpildes rezultāts:

Praktiskie uzdevumi

Atkārtojiet lapu pēc šī parauga: