Хосияти flex-basis

Хосияти flex-basis андозаи блоки мушаххаси flex-ро пеш аз истифодаи дигар хосиятҳои flex нисбат ба он муқаррар мекунад. Дар умум, хосият андозаи элементро дар баробари меҳвари асосӣ муқаррар мекунад. Ин маънои онро дорад, ки агар меҳвари асосӣ уфуқӣ бошад - ин хосият бараи элементҳо паҳноиро муқаррар мекунад, ва агар амудӣ бошад - пас баландиро.

Ба блоки мушаххаси flex истифода мешавад.

Ин хосият қисми таркибии хосияти ихтисорофта flex мебошад.

Синтаксис

интихобкунанда {
	flex-basis: ҳар гуна воҳидҳои CSS (ва фоизҳо) | auto;
}

Қимати пешфарз: auto.

Намуна

Бигзор меҳвари асосӣ назди мо уфуқӣ ҷойгир бошад, ва flex-basis қимати 50px дошта бошад. Дар ин ҳолат паҳноии элементҳо 50px хоҳад буд:

<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; /* меҳвар уфуқӣ аст */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* андозаи элемент */
	border: 1px solid green;
}

Намуна

Ҳоло биёед меҳварро гардонем, бидуни тағйир додани қимати хосияти flex-basis. Дар ин ҳолат дигар баландии элементҳо 50px хоҳад буд:

<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; /* меҳвар амудӣ аст */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Ҳамчунин бубинед

хосияти flex-direction,
ки самти меҳварҳои блокҳои flex-ро муқаррар мекунад
хосияти justify-content,
ки ҳамворкуниро баробари меҳвари асосӣ муқаррар мекунад
хосияти align-items,
ки ҳамворкуниро баробари меҳвари фаръӣ муқаррар мекунад
хосияти flex-wrap,
ки чандсатрии блокҳои flex-ро муқаррар мекунад
хосияти flex-flow,
ихтисорофта барои flex-direction ва flex-wrap
хосияти order,
ки тартиби блокҳои flex-ро муқаррар мекунад
хосияти align-self,
ки ҳамворкунии як блокро муқаррар мекунад
хосияти flex-grow,
ки ҳарисронии блокҳои flex-ро муқаррар мекунад
хосияти flex-shrink,
ки фишурдашавии блокҳои flex-ро муқаррар мекунад
хосияти flex,
ихтисорофта барои flex-grow, flex-shrink ва flex-basis