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
гнучкість: 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: 0 0 auto. Він розмірює предмет відповідно до його width/ heightвластивостей, але робить його абсолютно негнучким.
Це схоже на те, flex: initialза винятком того, що не дозволяється стискатися, навіть у ситуації переповнення.
flex:
Еквівалентно 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;) - (старий) означає старий синтаксис 2009 року (наприклад
display: box;)
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (сучасний) 20- (старий) | 3,1+ (старий) | 2-21 (старий) 22+ (новий) | 12,1+ (сучасний) | 10+ (гібрид) | 2,1+ (старий) | 3,2+ (старий) |
Браузер Blackberry 10+ підтримує новий синтаксис.
Для отримання додаткової інформації про те, як змішувати синтаксиси, щоб отримати найкращу підтримку браузера, зверніться до цієї статті (CSS-Tricks) або цієї статті (DevOpera).