Дар 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; /* блокҳо ба поёни тири асосӣ */
}

Натиҷаи иҷрои рамз:

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

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