С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
