Свойство flex в CSS

  • предыдущая страница filter
  • следующая страница flex-basis

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

Flex является сокращением для следующих свойств:

Flex устанавливает эластичную длину эластичных элементов.

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

Дополнительные рекомендации:

Учебное пособие: CSS эластичный фрейм

ссылка:Свойство flex-basis в CSS

ссылка:Свойство flex-direction в CSS

ссылка:Свойство flex-flow в CSS

ссылка:Свойство flex-grow в CSS

ссылка:Свойство flex-shrink в CSS

ссылка:Свойство flex-wrap в CSS

ссылка:HTML DOM flex свойство

пример

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

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

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

CSS синтаксис

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 переходит от родительского элемента. См. также: inherit.

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

по умолчанию: 0 1 auto
наследование: нет
создание анимации: поддержка. См. отдельные свойства. См. также:свойства анимации.
версия: CSS3
JavaScript синтаксис: object.style.flex="1"

более примеров

используя flex и медиа-запросы для создания различных макетов для различных размеров экрана/устройств:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* адаптивная вёрстка - создание единственной колонки (100%) вместо двух колонок (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

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

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

числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

числа с префиксами -webkit-, -ms- или -moz- представляют собой первую версию, использующую префикс.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • предыдущая страница filter
  • следующая страница flex-basis