Flex - Triky CSS

Anonim

Táto flexvlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.

Toto je skratka pre flex-grow, flex-shrinka flex-basis. Druhý a tretí parameter ( flex-shrinka flex-basis) sú voliteľné.

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

Tu je ukážka toho, na čo sa hodnoty mapujú v závislosti od toho, koľko hodnôt im 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

Spoločné hodnoty pre flex

flex: 0 auto;

To je rovnaké ako flex: initial;a skratka pre predvolenú hodnotu: flex: 0 1 auto. Zmení veľkosť položky na základe jej width/ heightvlastností (alebo jej obsahu, ak nie je nastavený).

Ohybná položka je nepružná, keď v nej zostáva nejaké voľné miesto, ale umožňuje jej zmenšenie na minimum, keď nie je dostatok miesta. Schopnosti zarovnania alebo autookraje je možné použiť na zarovnanie položiek flexa pozdĺž hlavnej osi.

flex: auto;

Toto je ekvivalentné k flex: 1 1 auto. Pozor, nejde o predvolenú hodnotu. Veľkosť položky sa určuje na základe jej width/ heightvlastností, robí ju však plne flexibilnou, aby absorbovala akýkoľvek ďalší priestor pozdĺž hlavnej osi.

Ak sú všetky položky sú buď flex: auto, flex: initialalebo flex: noneakýkoľvek zostávajúci priestor po boli dimenzované položky budú rozdelené rovnomerne do položky s flex: auto.

flex: žiadny;

Toto je ekvivalentné k flex: 0 0 auto. Veľkosť položky upravuje podľa jej width/ heightvlastností, ale robí ju úplne nepružnou.

Je to podobné ako flex: initialto, že nie je dovolené zmenšiť sa, a to ani v prípade pretečenia.

flex:

Rovná sa flex: 1 0px. Robí flexibilnú položku flexibilnou a nastavuje základ flexi na nulu, čo vedie k položke, ktorá dostane zadaný podiel zvyšného priestoru.

Ak všetky položky v kontajneri flex používajú tento vzor, ​​ich veľkosť bude úmerná zadanému faktoru flex.

Ukážka

Nasledujúca ukážka zobrazuje veľmi jednoduché rozloženie s Flexboxom vďaka tejto flexvlastnosti:

Tu je zjavný bit kódu:

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

Najskôr sme autorizovali položky flex, ktoré sa majú zobrazovať vo viacerých riadkoch s flex-flow: row wrap.

Potom povieme hlavičke aj päte, aby zobrali 100% súčasnej šírky výrezu, bez ohľadu na to, čo sa deje.

A hlavný obsah a obidva bočné panely budú zdieľať rovnaký riadok a zvyšné miesto budú zdieľať nasledovne: 66% (2 / (1 + 2)) pre hlavný obsah, 33% (1 / (1 + 2)) pre bočný panel .

Podpora prehľadávača

  • (moderný) znamená nedávnu syntax zo špecifikácie (napr. display: flex;)
  • (hybrid) znamená zvláštnu neoficiálnu syntax z roku 2011 (napr. display: flexbox;)
  • (staré) znamená starú syntax z roku 2009 (napr. display: box;)
Chrome Safari Firefox Opera IE 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é)

Prehliadač Blackberry 10+ podporuje novú syntax.

Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (triky CSS) alebo v tomto článku (DevOpera).