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;     /* блокҳо ба ибтидои меҳвари амудӣ */
}

Натиҷаи иҷрои код:

Масъалаҳои амалӣ

Саҳифаро ба ин намуна такрор кунед: