Flex - Triky CSS

Tato flexvlastnost je dílčí vlastností modulu Flexibilní rozvržení krabice.

To je zkratka pro flex-grow, flex-shrinka flex-basis. Druhý a třetí parametr ( flex-shrinka flex-basis) jsou volitelné.

Syntax

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 */ )

Tady je lopatka toho, na co se hodnoty mapují v závislosti na tom, kolik hodnot jim dáte:

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

Společné hodnoty pro flex

flex: 0 auto;

To je stejné jako flex: initial;a zkratka pro výchozí hodnotu: flex: 0 1 auto. Nastaví velikost položky na základě jejích width/ heightvlastností (nebo jejího obsahu, pokud není nastaven).

Díky tomu je flexibilní položka nepružná, když v ní zbývá nějaké volné místo, ale umožňuje jí zmenšit se na minimum, když není dostatek místa. Schopnosti zarovnání nebo autookraje lze použít k zarovnání položek flexu podél hlavní osy.

flex: auto;

To odpovídá flex: 1 1 auto. Pozor, toto není výchozí hodnota. Nastavuje velikost položky na základě jejích width/ heightvlastností, ale činí ji plně flexibilní, aby absorbovala další prostor podél hlavní osy.

Pokud jsou všechny položky jsou buď flex: auto, flex: initialnebo flex: nonejakýkoli zbývající prostor po byly dimenzované položky budou rozděleny rovnoměrně do položky s flex: auto.

flex: žádný;

To odpovídá flex: 0 0 auto. Velikost položky podle jeho width/ heightvlastností, ale je plně nepružná.

Je to podobné jako flex: initials tím rozdílem, že se nesmí zmenšit, a to ani v případě přetečení.

flex:

Ekvivalent k flex: 1 0px. Díky tomu je položka flex flexibilní a nastaví základ flexu na nulu, což má za následek položku, která obdrží zadaný podíl zbývajícího prostoru.

Pokud všechny položky v kontejneru flex používají tento vzor, ​​jejich velikosti budou úměrné specifikovanému faktoru flex.

Ukázka

Následující ukázka ukazuje velmi jednoduché rozložení s Flexboxem díky této flexvlastnosti:

Zde je odhalující bit kódu:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Nejprve jsme povolili, aby se položky flex zobrazovaly na více řádcích flex-flow: row wrap.

Pak řekneme hlavičce i zápatí, aby převzali 100% aktuální šířky výřezu, bez ohledu na to, co.

A hlavní obsah a oba postranní panely budou sdílet stejný řádek a zbývající prostor budou sdílet následovně: 66% (2 / (1 + 2)) pro hlavní obsah, 33% (1 / (1 + 2)) pro postranní panel .

Podpora prohlížeče

• (moderní) znamená nedávnou syntaxi ze specifikace (např. display: flex;)
• (hybrid) znamená lichou neoficiální syntaxi z roku 2011 (např. display: flexbox;)
• (old) znamená starou syntaxi z roku 2009 (např. display: box;)

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
21+ (moderní) 20- (starý)	3.1+ (starý)	2-21 (starý) 22+ (nový)	12.1+ (moderní)	10+ (hybridní)	2.1+ (starý)	3.2+ (starý)

Prohlížeč Blackberry 10+ podporuje novou syntaxi.

Další informace o tom, jak kombinovat syntaxe s cílem získat nejlepší podporu prohlížeče, najdete v tomto článku (triky CSS) nebo v tomto článku (DevOpera).