CSS-свойство flex

CSS-свойство flex определяет компоненты элемента со способностью растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это короткое свойство для одновременной установки свойств flex-grow, flex-shrink и flex-basis.

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

Синтаксис

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

flex: [ flex-grow flex-shrink flex-basis ] | none | auto | initial | inherit

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

.flex-container {
    -webkit-flex: 1; /* Safari 6.1+ */
        -ms-flex: 1; /* IE 10 */
            flex: 1; /* Standard syntax */
}

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

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

Значение	Описание
`flex-grow`	Определяет flex grow factor для flex-элемента.
`flex-shrink`	Определяет flex shrink factor для flex-элемента.
`flex-basis`	Определяет начальный размер flex-элемента.
`none`	Эквивалентно настройке flex на `0 0 auto`.
`auto`	Эквивалентно настройке flex на `1 1 auto`.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `flex`.