CSS да флекс блокларни кўндаланг ўқ бўйича текислаш

Келинг энди блокларни кўндаланг ўқ бўйича ҳам текислаймиз. Ушбу ўқ бўйича текислаш align-items хусусияти билан берилади. flex-start қиймати элементларни ўқ бошланғичига, flex-end қиймати эса ўқ oxирига жойлаштиради.

Келинг мисолларда синаймиз.

Мисол

Асосий ўқни чапдан ўнгга йўналтирамиз. Бу ҳолда кўндаланг ўқ юқоридан пастга йўналган бўлади. Келинг блокларимизни ҳам асосий ўқ, ҳам кўндаланг ўқ бўйича жойлаштиришни тартибга солиймиз.

Асосий ўқ бўйича блокларни унинг бошланғичига, яъни чап четга жойлаштирамиз. Бунинг учун 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;     /* блоклар кўндаланг ўқ бошланғичига */
}

Коднинг ишлаш натижаси:

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

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