СSS Свойство flex
Пример
Пусть все гибкие элементы будут одинаковой длины, независимо от их содержания:
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Редактор кода »
Определение и использование
Свойство flex
- это сокращенное свойство для:
Свойство flex
задает гибкую длину для гибких элементов.
Примечание: Если элемент не является гибким элементом, то свойство flex
не имеет никакого эффекта.
Значение по умолчанию: | 0 1 auto |
---|---|
Унаследованный: | нет |
Анимируемый: | да, см. раздел отдельные свойства. Прочитайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.flex="1" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit-, -ms- или -moz- указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS Синтаксис
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Значение свойств
Значение | Описание |
---|---|
flex-grow | Число, определяющее, на сколько элемент будет расти относительно остальных гибких элементов |
flex-shrink | Число, указывающее, на сколько элемент будет уменьшаться относительно остальных гибких элементов |
flex-basis | Длина элемента. Допустимые значения: "auto", "inherit" или число, за которым следуют "%", "px", "em" или любая другая единица длины |
auto | Same as 1 1 auto. |
initial | Так же, как 0 1 auto. Прочитайте о initial |
none | Так же, как 0 0 auto. |
inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Связанные страницы
CSS Учебник: CSS Гибкий бокс
CSS Справочник: Свойство flex-basis
CSS Справочник: Свойство flex-direction
CSS Справочник: Свойство flex-flow
CSS Справочник: Свойство flex-grow
CSS Справочник: Свойство flex-shrink
CSS Справочник: Свойство flex-wrap
HTML DOM Справочник: Свойство flex