Својството 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