CSS flex Свойство
Пример
Пусть все гибкие элементы будут одинаковой длины, независимо от ее содержания:
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Определение и использование
Свойство flex
является сокращенным для следующих свойств:
Свойство flex
задает гибкую длину для гибких элементов.
Примечание: Если элемент не является гибким элементом, свойство flex
не имеет эффекта.
Значение по умолчанию: | 0 1 auto |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.flex="1" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -webkit-, -ms- or -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", "наследовать", или число, за которым следуют "%", "px", "EM" или любой другой единицы длины |
auto | То же, что 1 1 Auto. |
initial | То же, что 0 1 Auto. (Читайте о initial) |
none | То же, что 0 0 Auto. |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Flexible Box
CSS Справка: flex-basis Свойство
CSS Справка: flex-direction Свойство
CSS Справка: flex-flow Свойство
CSS Справка: flex-grow Свойство
CSS Справка: flex-shrink Свойство
CSS Справка: flex-wrap Свойство
HTML DOM Справочник: flex Свойство