Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Свойство flex-basis в CSS3 Свойство empty-cells в CSS

Метод использования и примеры CSS3 flex

CSS-свойство flex определяет составные части эластичной длины. Оно используется для одновременного установленияflex-grow,flex-shrinkиflex-basisСокращенное имя свойства.

В таблице приведено описание использования и истории версий этого свойства, а также синтаксис использования свойства в скриптах на JavaScript.

Значение по умолчанию:	0 1 auto; Просмотр всех свойств
Применяется для:	Эластичные элементы
Инherit:	Нет
Анимируемый:	Да, каждый атрибут в шпаргалке анимируемый.Узнайте больше Анимационные свойства.
Версия:	Новые возможности CSS3
JavaScript грамматика:	object.style.flex="1"

Грамматика использования flex

Грамматика этого свойства такая:

flex:　[　flex-grow　flex-shrink　flex-basis　]　|　none　|　auto　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство flex.

Пример

.flex-container　{
　　　　-webkit-flex:　1;　/*　Safari　6.1+　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　　　　　flex:　1;　
}

Проверьте, пожалуйста‹/›

Значение свойства

В таблице ниже описаны значения этого свойства.

Значение	Описание
flex-grow	Указать коэффициент роста или положительной эластичности эластичного элемента.
flex-shrink	Указать коэффициент сжатия или отрицательной эластичности эластичного элемента.
flex-basis	Указать начальный размер эластичного элемента.
none	Эквивалентно установке flex в 0 0 auto.
auto	Эквивалентно установке flex в 1 1 auto.
initial	Установить этот параметр в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значения свойств flex родительского элемента.

Совместимость браузеров

Совместимость браузеров для свойств flex, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 18+ ^-moz-, 28 Google Chrome 21+ ^-webkit-, 29 Internet Explorer 10+ ^-ms-, 11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

Дополнительное чтение

Узнайте больше из следующего руководства:CSS3 многостраничная разметка.

Связанные свойства:align-content,align-items,align-self,display,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

Свойство flex-basis в CSS3 Свойство empty-cells в CSS