CSS-ում ֆլեքս տարրերի հավասարեցում գլխավոր առանցքի երկայնքով

justify-content հատկությունը թույլ է տալիս տարրերը հավասարեցնել գլխավոր առանցքի երկայնքով: Նախկինում դուք արդեն անցել եք center, space-between, space-around, space-evenly արժեքները: Եկեք հիմա ուսումնասիրենք ևս մի քանի արժեք:

flex-start արժեքը տարրերը սեղմում է դեպի գլխավոր առանցքի սկիզբը, իսկ flex-end արժեքը` դեպի վերջը: Եկեք նայենք օրինակներով:

Օրինակ

Եկեք ուղղորդենք գլխավոր առանցքը ձախից աջ՝ տալով flex-direction հատկությանը row արժեքը: Եկեք սեղմենք բլոկները դեպի առանցքի սկիզբը: Դրա համար justify-content հատկությունը կսահմանենք flex-start արժեքով:

.parent {
	display: flex;
	flex-direction: row; /* գլխավոր առանցքը ձախից աջ */
	justify-content: flex-start; /* բլոկները դեպի գլխավոր առանցքի սկիզբը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Եկեք հիմա սեղմենք բլոկները դեպի առանցքի վերջը: Դրա համար justify-content հատկությունը կսահմանենք flex-end արժեքով:

.parent {
	display: flex;
	flex-direction: row; /* գլխավոր առանցքը ձախից աջ */
	justify-content: flex-end; /* բլոկները դեպի գլխավոր առանցքի վերջը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Եկեք հիմա ուղղորդենք գլխավոր առանցքը աջից ձախ, տալով flex-direction հատկությանը row-reverse արժեքը: Եկեք սեղմենք բլոկները դեպի առանցքի սկիզբը, այսինքն՝ աջ եզրին: Դրա համար justify-content հատկությունը կսահմանենք flex-start արժեքով:

.parent {
	display: flex;
	flex-direction: row-reverse; /* գլխավոր առանցքը աջից ձախ */
	justify-content: flex-start; /* բլոկները դեպի գլխավոր առանցքի սկիզբը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Իսկ հիմա եկեք սեղմենք բլոկները դեպի գլխավոր առանցքի վերջը, այսինքն՝ ձախ եզրին: Դրա համար justify-content հատկությունը կսահմանենք flex-end արժեքով:

.parent {
	display: flex;
	flex-direction: row-reverse; /* գլխավոր առանցքը աջից ձախ */
	justify-content: flex-end; /* բլոկները դեպի գլխավոր առանցքի վերջը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Նախորդ օրինակներում գլխավոր առանցքը ուղղորդված էր հորիզոնական: Եկեք հիմա շրջենք այն և ուղղորդենք ուղղահայաց:

Եկեք ուղղորդենք գլխավոր առանցքը ներքև՝ տալով flex-direction հատկությանը column արժեքը:

Եկեք սեղմենք բլոկները դեպի գլխավոր առանցքի սկիզբը, այսինքն վերևի եզրին: Դրա համար justify-content հատկությունը կսահմանենք flex-start արժեքով:

.parent {
	display: flex;
	flex-direction: column; /* գլխավոր առանցքը վերևից ներքև */
	justify-content: flex-start; /* բլոկները դեպի գլխավոր առանցքի սկիզբը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Եկեք հիմա սեղմենք բլոկները դեպի գլխավոր առանցքի վերջը, այսինքն՝ ներքևի եզրին: Դրա համար justify-content հատկությունը կսահմանենք flex-end արժեքով:

.parent {
	display: flex;
	flex-direction: column; /* գլխավոր առանցքը վերևից ներքև */
	justify-content: flex-end; /* բլոկները դեպի գլխավոր առանցքի վերջը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Եկեք շրջենք գլխավոր առանցքը՝ այն ուղղորդելով ներքևից վերև: Դրա համար flex-direction հատկությանը կտանք column-reverse արժեքը: Այս դեպքում բլոկները կփոխեն իրենց հերթականությունը - առանցքի սկզբում կկանգնի HTML կոդում վերջին բլոկը:

Եկեք սեղմենք բլոկները դեպի գլխավոր առանցքի սկիզբը, այսինքն՝ ներքևի եզրին: Դրա համար justify-content հատկությունը կսահմանենք flex-start արժեքով:

.parent {
	display: flex;
	flex-direction: column-reverse; /* գլխավոր առանցքը ներքևից վերև */
	justify-content: flex-start; /* բլոկները դեպի գլխավոր առանցքի սկիզբը */
}

Կոդի կատարման արդյունքը:

Օրինակ

Եկեք սեղմենք բլոկները դեպի գլխավոր առանցքի վերջը, այսինքն՝ վերևի եզրին: Դրա համար justify-content հատկությունը կսահմանենք flex-end արժեքով:

.parent {
	display: flex;
	flex-direction: column-reverse; /* գլխավոր առանցքը ներքևից վերև */
	justify-content: flex-end; /* բլոկները դեպի գլխավոր առանցքի վերջը */
}

Կոդի կատարման արդյունքը:

Գործնական առաջադրանքներ

Կրկնեք էջն ըստ տրված նմուշի: