CSS :: Свойство flex-basis

css-свойство flex-basis (от англ. flex basis – основа флекс-элемента) задает базовый (начальный) размер флекс-элемента. Если свойство используется, то его значение для определения базового размера будет иметь приоритет над значениями свойств width или height (в зависимости от того, какое из них будет иметь отношение к базовому размеру в текущей ситуации).

Характеристики

Значение по умолчанию: auto.
Применяется: к флекс-элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.flexBasis="value".

Синтаксис

flex-basis: auto | <размер>

Значения

В качестве значений свойство flex-basis может принимать:

auto – базовый размер флекс-элемента устанавливается автоматически в зависимости от размера его содержимого (используется по умолчанию);
размер – разрешается использовать любые доступные в CSS единицы измерения длины, а также проценты, которые рассчитываются относительно размера флекс-контейнера.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-flex-basis

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis

Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		width: 500px;
		height: 100px;
		margin: auto;
		margin-top: 20px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		flex-basis: 70px;
		width: 200px;
		min-width: 50px;
		height: 20px;
		padding: 10px;
		margin: auto;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}
		
		.flex_column{
		flex-direction: column;
		height: 380px;
		}
		
		.p_normal{
		display: block;
		width: 480px;
		height: auto;
		text-align: left;
		margin-top: 2em;
		}			
		
	</style>
</head>
<body>

	<div>
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div>
		<p style="flex-basis: 50px;">1</p>
		<span style="flex-basis: 100px;">2</span>
		<p style="flex-basis: 200px;">3</p>
	</div>
	
	<div class="flex_column">
		<p>1</p><span>2</span>
		<p style="flex-basis: 40px;">3</p>
	</div>

	<p class="p_normal">
		В первом флекс-контейнере примера мы базовый размер для 
		отдельных флекс-элементов не изменяли, поэтому все элементы 
		визуально отображаются с шириной 70px (направление главной 
		оси у нас горизонтальное, поэтому базовый размер переопределяет 
		ширину). Высота же у всех элементов осталась такой, какой мы 
		определили ее в таблицах стилей, т.е. 20px.
	</p>

	<p class="p_normal">
		Во втором флекс-контейнере мы каждому флекс-элементу задали свой 
		базовый размер. Высота при этом у всех также осталась равна 20px.
	</p>

	<p class="p_normal">
		В третьем флекс-контейнере мы изменили направление главной оси на 
		вертикальное и переопределили его высоту, установив новое значение 
		в 380px (чтобы было хорошо видно колонку). Так как теперь 
		направление главной оси вертикальное, базовый размер играет роль 
		высоты. Поэтому мы и видим, что высота первых двух флекс-элементов 
		увеличилась и стала равна базовому размеру, т.е. 70px. А вот ширина 
		всех флекс-элементов стала равна 200px, как и было определено в 
		таблице стилей (ведь в данном блоке базовый размер переопределяет 
		уже высоту). Для третьего элемента мы для примера переопределили его 
		базовый размер, поэтому его высота стала равна 40px, но ширина 
		осталась равна 200px. 
	</p>

</body>
</html>

Пример №1