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.

Поддержка браузеров

Свойство flex поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.