В flexимота е под-собственост на модула гъвкави полета Разпределение на.
Това е съкратен 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: 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-трикове) или тази статия (DevOpera).