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

CSS-свойство flex-based указывает начальный основной размер элемента flex.

Значение по умолчанию:	`auto`
Применяется к:	Flex-элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

flex-basis: width | auto | initial | inherit

Примеры написания кода свойства flex-basis:

.flex-container {
    display: flex;      
} 
.item1 {
    background: #ff80c0;
    -webkit-flex-basis: 300px; /* Safari 6.1+ */
    flex-basis: 300px;
}
.item2 {
    background: #8080ff;
    -webkit-flex-basis: 30%; /* Safari 6.1+ */
    flex-basis: 30%;
}
.item3 {
    width: 120px;
    background:#0080ff;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
width	Длина в абсолютных или относительных единицах, указывающая начальную длину flex-элемента. Отрицательные значения недействительны.
`auto`	Ширина flex-элемента равна значению его свойства `width`. Если свойство `width` не указано для flex-элемента, ширина будет соответствовать его содержимому. Это значение установлено по умолчанию.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `flex-basis`.