Flex - CSS-triki

Anonim

flexLastnost je sub-lastnost modula Fleksibilna Box postavitve.

To je okrajšava za flex-grow, flex-shrinkin flex-basis. Drugi in tretji parameter ( flex-shrinkin flex-basis) sta neobvezna.

Sintaksa

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

Tukaj je pregled, na kaj se vrednosti preslikajo, odvisno od tega, koliko vrednosti mu daste:

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

Skupne vrednosti za flex

flex: 0 samodejno;

To je isto kot flex: initial;in okrajšava za privzete vrednosti: flex: 0 1 auto. Element prilagodi glede na lastnosti width/ heightlastnosti (ali vsebino, če ni nastavljena).

Zaradi fleksibilnega predmeta je prožen prostor, ko ostane nekaj prostega prostora, vendar mu omogoča, da se zmanjša, ko ni dovolj prostora. Sposobnosti poravnave ali autorobove je mogoče uporabiti za poravnavo upogibnih elementov vzdolž glavne osi.

flex: samodejno;

To je enakovredno flex: 1 1 auto. Pazite, to ni privzeta vrednost. Element prilagodi glede na lastnosti width/ heightlastnosti, vendar je popolnoma prilagodljiv, tako da absorbira dodaten prostor vzdolž glavne osi.

Če so vsi elementi bodisi flex: auto, flex: initialali flex: none, bo preostali prostor po velikosti elementov enakomerno porazdeljen med elemente z flex: auto.

fleks: noben;

To je enakovredno flex: 0 0 auto. To velikosti element po njegovih width/ heightlastnosti, vendar je to popolnoma neprilagodljiv.

To je podobno, flex: initialle da se ne sme skrčiti, tudi v prelivni situaciji.

fleks:

Enakovredno flex: 1 0px. Zaradi tega fleksibilni element postane fleksibilen in osnovo fleksibilnosti nastavi na nič, zaradi česar dobi element, ki prejme določen delež preostalega prostora.

Če vsi predmeti v fleks posodi uporabljajo ta vzorec, bodo njihove velikosti sorazmerne z določenim faktorjem upogibanja.

Demo

Naslednja predstavitev prikazuje zelo preprosto postavitev s Flexboxom zahvaljujoč flexlastnosti:

Tu je razkrit delček kode:

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

Najprej smo dovolili, da se elementi flex prikazujejo v več vrsticah z flex-flow: row wrap.

Nato v glavi in ​​nogi povemo, naj zavzameta 100% trenutne širine vidnega polja, ne glede na to.

Glavna vsebina in obe stranski vrstici bosta delili isto vrstico, preostali prostor pa si delita, kot sledi: 66% (2 / (1 + 2)) za glavno vsebino, 33% (1 / (1 + 2)) za stransko vrstico .

Podpora za brskalnik

  • (moderno) pomeni nedavno sintakso iz specifikacije (npr. display: flex;)
  • (hibrid) pomeni nenavadno neuradno skladnjo iz leta 2011 (npr. display: flexbox;)
  • (staro) pomeni staro skladnjo iz leta 2009 (npr. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderno)
20- (staro)		 3,1+ (staro) 2–21 (stari)
22+ (novi)		 12,1+ (moderno) 10+ (hibrid) 2,1+ (staro) 3,2+ (staro)

Brskalnik Blackberry 10+ podpira novo sintakso.

Za več informacij o tem, kako mešati sintakse, da dobite najboljšo podporo za brskalnik, si oglejte ta članek (CSS-triki) ali ta članek (DevOpera).