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; /* блокларни бош ўқнинг охигига */
}

Коднинг ижроси натижаси:

Амалий машқлар

Берілган намунага қараб саҳифангизни такрорланг: