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