Это flexсвойство является подсвойством модуля Flexible Box Layout.
Это сокращенное flex-grow, flex-shrinkи flex-basis. Второй и третий параметры ( flex-shrinkи flex-basis) необязательны.
Синтаксис
flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )Вот краткая информация о том, на что сопоставляются значения в зависимости от того, сколько значений вы ему задали:
flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inheritОбщие значения для flex
flex: 0 авто;
Это так же , как flex: initial;и сокращенное значение по умолчанию: flex: 0 1 auto. Он определяет размер элемента в зависимости от его width/ heightсвойств (или его содержимого, если он не установлен).
Это делает гибкий элемент негибким, когда остается немного свободного места, но позволяет ему сжиматься до минимума, когда места недостаточно. Возможности выравнивания или autoполя можно использовать для выравнивания гибких элементов по главной оси.
flex: авто;
Это эквивалентно flex: 1 1 auto. Осторожно, это не значение по умолчанию. Он изменяет размер элемента в зависимости от его свойств width/ height, но делает его полностью гибким, чтобы они занимали лишнее пространство вдоль главной оси.
Если все элементы либо flex: auto, flex: initialили flex: noneлюбое оставшееся пространство после того как детали были размерных будут распределены равномерно по пунктам , с flex: auto.
flex: нет;
Это эквивалентно flex: 0 0 auto. Он определяет размер элемента в соответствии с его width/ heightсвойствами, но делает его полностью негибким.
Это похоже на то, flex: initialза исключением того, что не допускается сжатие даже в случае переполнения.
гибкость:
Эквивалентно flex: 1 0px. Это делает гибкий элемент гибким и устанавливает для него нулевое значение, в результате чего элемент получает указанную пропорцию оставшегося пространства.
Если все элементы в гибком контейнере используют этот шаблон, их размеры будут пропорциональны указанному коэффициенту гибкости.
Демо
В следующей демонстрации показан очень простой макет с Flexbox благодаря flexсвойству:
Вот замечательный фрагмент кода:
.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )Во-первых, мы разрешили отображение гибких элементов в нескольких строках с помощью flex-flow: row wrap.
Затем мы говорим как верхнему, так и нижнему колонтитулу занять 100% текущей ширины окна просмотра, несмотря ни на что.
И основной контент и обе боковые панели будут иметь одну и ту же строку, разделяя оставшееся пространство следующим образом: 66% (2 / (1 + 2)) для основного содержимого, 33% (1 / (1 + 2)) для боковой панели. .
Поддержка браузера
- (современный) означает последний синтаксис из спецификации (например
display: flex;) - (гибрид) означает странный неофициальный синтаксис 2011 года (например
display: flexbox;) - (old) означает старый синтаксис 2009 года (например
display: box;)
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (современный) 20- (старый) | 3.1+ (старые версии) | 2-21 (старые) 22+ (новые) | 12.1+ (современный) | 10+ (гибрид) | 2.1+ (старая версия) | 3.2+ (старые) |
Браузер Blackberry 10+ поддерживает новый синтаксис.
Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).