Свойство flex

Свойство flex сокращение для flex-basis, flex-shrink и flex-grow.

Применяется к: конкретному flex блоку.

Порядок значения не имеет. Второй и третий параметры (flex-shrink, flex-basis) не обязательны.

Значения

См. соответствующие свойства.

Значение по умолчанию: 0 1 auto.

Пример

Пусть у нас есть 3 элемента. Ширина каждого из них составляет 200px и суммарно равна 600px, что больше ширины родительского контейнера, которая равна 300px. Давайте назначим для первого элемента ширину 200px, для второго элемента - 300px, для третьего элемента - 100px. У всех элементов пусть значение flex-basis будет равно 1, а flex-shrink - 1, 2, 3 в соответствии с порядковым номером элемента:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Смотрите также

свойство flex-direction,
которое задает направление осей flex блоков
свойство justify-content,
которое задает выравнивание по главной оси
свойство align-items,
которое задает выравнивание по поперечной оси
свойство flex-wrap,
которое многострочность flex блоков
свойство flex-flow,
сокращение для flex-direction и flex-wrap
свойство order,
которое задает порядок flex блоков
свойство align-self,
которое задает выравнивание одного блока
свойство flex-basis,
которое задает размер конкретного flex блока
свойство flex-grow,
которое задает жадность flex блоков
свойство flex-shrink,
которое задает сжимаемость flex блоков