Памер флекс элемента ўздоўж галоўнай восі

Уласцівасці width і height задаюць шырыню і вышыню флекс элемента незалежна ад напрамку восей. Гэта значыць, калі вось гарызантальная, то width будзе задаваць шырыню, але калі вось вертыкальная, то width па-ранейшаму будзе задаваць шырыню. Часам такая паводзіны не зручная.

У флекс мадэлі існуе спецыяльная ўласцівасць flex-basis, якая задае памер элемента ўздоўж галоўнай восі. Гэта значыць, што калі галоўная вось гарызантальная - гэтая ўласцівасць будзе задаваць шырыню элементаў, а калі вертыкальная - то вышыню. Даную ўласцівасць трэба задаваць самім flex элементам, а не іх бацьку. Давайте паглядзім на прыкладах.

Хай зараз галоўная вось гарызантальная, а 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;
}

Зрабіце 5 флекс-блокаў. Задайце ім шырыню ўздоўж галоўнай восі ў 100px. Паглядзіце на паводзіны блокаў уздоўж розных восей.

Калі вось гарызантальная і блоку зададзена ўласцівасць flex-basis і адначасова ўласцівасць width, то flex-basis будзе мець прыярытэт. Праверце гэта.

Калі вось вертыкальная і блоку зададзена ўласцівасць flex-basis і адначасова ўласцівасць height, то flex-basis будзе мець прыярытэт. Праверце гэта.