CSS свойство flex

Универсальное свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.

Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: "flex: 0 1 auto;". Можно указывать как одно, так и все три значения свойств.

Рекомендуется использовать именно сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

Внимание: Если элемент не является флекс-элементом, то свойство flex не будет иметь эффекта.

CSS синтаксис

flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;

Возможные значения

Значение	Описание
flex-grow	Коэффициент растяжения. Коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов.
flex-shrink	Коэффициент сужения. Коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов.
flex-basis	Базовая ширина флекс-элемента.
auto	Эквивалентно "flex: 1 1 auto;".
none	Эквивалентно "flex: 0 0 auto;".
inherit	Значение наследуется от родительского элемента.
initial	Эквивалентно "flex: 0 1 auto;".

Пример использования

Устанавливаем единую длину для всех флекс-элементов не зависимо от их содержимого


#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
}