CSS-те флекс блоктерді көлденең ось бойынша туралау

Енді блоктерді көлденең ось бойынша да туралайық. Бұл ось бойынша туралау align-items сипаттамасы арқылы белгіленеді. flex-start мәні элементтерді осьтің басына жылжытады, ал flex-end мәні - соңына.

Мысалдар арқылы көрейік.

Мысал

Негізгі осьті солдан оңға қарай бағыттайық. Бұл жағдайда көлденең ось жоғарыдан төмен қарай бағытталады. Блоктердің орналасуын негізгі ось бойынша да, көлденең ось бойынша да реттейік.

Негізгі ось бойынша блоктерді оның басына, яғни сол жақ шетіне жылжытамыз. Ол үшін justify-content мәнін flex-start деп қоямыз. Көлденең ось бойынша да блоктерді оның басына, яғни жоғарғы шетіне жылжытамыз. Ол үшін align-items мәнін де flex-start деп қоямыз.

Нәтижесін қарапайым көрейік:

.parent {
	display: flex;
	flex-direction:  row;        /* негізгі ось оңға, көлденең төмен */
	justify-content: flex-start; /* блоктер негізгі осьтің басына */
	align-items:     flex-start; /* блоктер көлденең осьтің басына */
}

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

Мысал

Енді блоктерді көлденең осьтің соңына, яғни төменгі шетіне жылжытайық. Ол үшін align-items мәнін flex-end деп қоямыз:

.parent {
	display: flex;
	flex-direction:  row;        /* негізгі ось оңға, көлденең төмен */
	justify-content: flex-start; /* блоктер негізгі осьтің басына */
	align-items:     flex-end;   /* блоктер көлденең осьтің соңына */
}

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

Мысал

Енді негізгі осьті жоғарыдан төмен қарай бағыттайық. Негізгі ось тік болғандықтан, көлденең ось оңнан солға қарай бағытталады. Блоктерді екі ось бойынша да олардың басына жылжытайық:

.parent {
	display: flex;
	flex-direction:  column;     /* негізгі ось төмен, көлденең оңға */
	justify-content: flex-start; /* блоктер негізгі осьтің басына */
	align-items:     flex-start; /* блоктер көлденең осьтің басына */
}

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

Мысал

Ал енді көлденең ось бойынша блоктерді оның соңына жылжытайық:

.parent {
	display: flex;
	flex-direction:  column;     /* негізгі ось төмен, көлденең оңға */
	justify-content: flex-start; /* блоктер негізгі осьтің басына */
	align-items:     flex-end;   /* блоктер көлденең осьтің соңына */
}

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

Мысал

Блоктерді екі осьтің де соңына жылжытайық:

.parent {
	display: flex;
	flex-direction:  column;   /* негізгі ось төмен, көлденең оңға */
	justify-content: flex-end; /* блоктер негізгі осьтің соңына */
	align-items:     flex-end; /* блоктер көлденең осьтің соңына */
}

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

Мысал

Негізгі осьтің бағытын өзгертейік - оны төменнен жоғары қарай бағыттайық. Бұл ретте көлденең ось өз бағытын өзгертпейді, өйткені негізгі ось әлі де тік болып қалады.

Блоктерді екі осьтің де басына жылжытайық:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* негізгі ось жоғары, көлденең оңға */
	justify-content: flex-start;     /* блоктер негізгі осьтің басына */
	align-items:     flex-start;     /* блоктер көлденең осьтің басына */
}

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

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

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