Свойство flex
Пример style.flex
Пусть все гибкие элементы будут одинаковой длины, независимо от их содержания:
for (i = 0; i < y.length; i++) {
y[i].style.flex = "1";
}
Попробуйте сами »
Описание flex
Свойство flex устанавливает или возвращает длину элемента относительно остальных гибких элементов внутри того же контейнера.
Свойство flex является сокращением для свойств flexGrow, flexShrink и flexBasis.
Примечание: Если элемент не является гибким, свойство flex не имеет никакого эффекта.
Поддержка flex
| Свойство | |||||
|---|---|---|---|---|---|
| flex | Да | 11.0 | Да | 9.0 | Да |
Синтаксис flex
Вернуть свойство flex:
object.style.flex
Установите свойство flex:
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
Значение свойства flex
| Значение | Описание |
|---|---|
| flex-grow | Число, указывающее, насколько элемент вырастет относительно остальных гибких элементов |
| flex-shrink | Число, указывающее, насколько элемент уменьшится относительно остальных гибких элементов |
| flex-basis | Длина элемента. Допустимые значения: "auto", "inherit" или число, за которым следует "%", "px", "em" или любая другая единица длины |
| auto | То же, что и 1 1 auto. |
| initial | То же, что и 0 1 auto. Читайте о initial |
| none | То же, что и 0 0 auto. |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали flex
| Значение по умолчанию: | 0 1 auto |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство flex элемента |
| CSS Версия | CSS3 |
Связанные страницы 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