Asosiy o‘q bo‘yicha fleks element o‘lchami

width va height xususiyatlari fleks elementning kengligi va balandligini o‘qlar yo‘nalishidan qat'iy nazar belgilaydi. Ya'ni, agar o‘q gorizontal bo‘lsa, width kenglikni belgilaydi, lekin agar o‘q vertikal bo‘lsa, width baribir kenglikni belgilaydi. Ba'zida bunday xatti-harakat qulay emas.

Fleks modelida flex-basis deb ataladigan maxsus xususiyat mavjud bo‘lib, u elementning asosiy o‘q bo‘yicha o‘lchamini belgilaydi. Bu shuni anglatadiki, agar asosiy o‘q gorizontal bo‘lsa - bu xususiyat elementlarning kengligini, agar vertikal bo‘lsa - balandligini belgilaydi. Ushbu xususiyat fleks elementlarning o‘zlariga, ularning ota-elementiga emas, belgilanishi kerak. Keling, misollar bilan ko‘rib chiqaylik.

Faraz qilaylik, asosiy o‘q gorizontal, flex-basis ning qiymati 50px. Bunda elementlarning kengligi 50px bo‘ladi:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row; /* o‘q gorizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* element o‘lchami */
	border: 1px solid green;
}

Keling, endi flex-basis xususiyatining qiymatini o‘zgartirmay, o‘qni aylantiramiz. Bunda elementlarning balandligi 50px bo‘ladi:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* o‘q vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

5 ta fleks-blok yarating. Ularga asosiy o‘q bo‘yicha kenglikni 100px qilib belgilang. Bloklarning turli o‘qlar bo‘yicha xatti-harakatlarini kuzating.

Agar o‘q gorizontal bo‘lsa va blokka flex-basis xususiyati va bir vaqtning o‘zida width xususiyati belgilangan bo‘lsa, flex-basis ustunlik qiladi. Buni tekshiring.

Agar o‘q vertikal bo‘lsa va blokka flex-basis xususiyati va bir vaqtning o‘zida height xususiyati belgilangan bo‘lsa, flex-basis ustunlik qiladi. Buni tekshiring.