Уласцівасць 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