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; /* блоктарды басты осьтің соңына */
}

Кодтың орындалу нәтижесі:

Практикалық тапсырмалар

Берілген үлгі бойынша бетті қайталаңыз: