Свойство style flex

Определение и использование

flex Свойство устанавливает или возвращает длину элемента по сравнению с другими эластичными элементами в том же контейнере.

flex Свойство является сокращением для свойств flexGrow, flexShrink и flexBasis.

Комментарий:Если элемент не является эластичным элементом, то flex Свойство недопустимо.

См. также:

Руководство по CSS:свойство flex

Руководство по HTML DOM STYLE:Свойство flexBasis

Руководство по HTML DOM STYLE:Свойство flexDirection

Руководство по HTML DOM STYLE:Свойство flexFlow

Руководство по HTML DOM STYLE:Свойство flexGrow

Руководство по HTML DOM STYLE:Свойство flexShrink

Руководство по HTML DOM STYLE:Свойство flexWrap

Пример

Сделать длину всех эластичных элементов одинаковой, независимо от их содержимого:

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

Попробуйте сами

Грамматика

Вернуть свойство flex:

object.style.flex

Установить свойство flex:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

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

Значение Описание
flex-grow Число, определяющее величину увеличения элемента по сравнению с другими эластичными элементами.
flex-shrink Число, определяющее величину уменьшения элемента по сравнению с другими эластичными элементами.
flex-basis

Длина элемента.

Допустимые значения: "auto", "inherit", или значения в процентах, "px", "em", или другие единицы измерения длины.
auto Эквивалентно 1 1 auto.
initial Эквивалентно 0 1 auto. См. initial.
none Эквивалентно 0 0 auto.
inherit Инherits this property from its parent element. См. inherit.

Технические детали

Значение по умолчанию: 0 1 auto
Возвратное значение: строка, которая указывает на свойство flex.
Версия CSS: CSS3

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

Chrome Edge Firefox Сafari Опера
Chrome Edge Firefox Сafari Опера
Поддержка 11.0 Поддержка 9.0 Поддержка