Lankstytis - CSS-gudrybės

Anonim

Ši flexnuosavybė yra „Flexible Box Layout“ modulio sub-ypatybė.

Tai yra sutrumpinimas flex-grow, flex-shrinkir flex-basis. Antrasis ir trečiasis parametrai ( flex-shrinkir flex-basis) yra neprivalomi.

Sintaksė

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

Štai koks vertybių žemėlapis priklauso nuo to, kiek verčių jam suteikiate:

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

Bendros vertės flex

lankstumas: 0 automatinis;

Tai tas pats, kaip flex: initial;ir už numatytąją vertę sutrumpinimas: flex: 0 1 auto. Tai dydžių elementą remiantis jo width/ heightsavybių (ar jos turiniu, jei nenustatyta).

Tai daro lankstų elementą nelankstų, kai lieka laisvos vietos, tačiau leidžia jam susitraukti iki minimumo, kai nėra pakankamai vietos. Lygiavimo galimybes ar autoparaštes galima naudoti sulygiuoti elementus išilgai pagrindinės ašies.

lankstumas: auto;

Tai prilygsta flex: 1 1 auto. Saugokitės, tai nėra numatytoji reikšmė. Tai dydžių elementą remiantis jo width/ heightsavybių, bet daro tai visiškai lanksti, kad jie sugeria bet kokią papildomą erdvę išilgai pagrindinės ašies.

Jei visi elementai yra arba flex: auto, flex: initialarba flex: none, po elementų dydžio likusi erdvė bus tolygiai paskirstyta elementams su flex: auto.

lankstumas: nėra;

Tai prilygsta flex: 0 0 auto. Tai dydžių elementą pagal jo width/ heightsavybių, bet daro tai visiškai nelankstus.

Tai panašu į flex: initialtai, kad neleidžiama susitraukti net esant perpildymo situacijai.

lankstumas:

Prilygsta flex: 1 0px. Tai daro lankstų elementą lankstų ir nulinę lankstumo pagrindą, todėl elementas gauna nurodytą likusios vietos dalį.

Jei visi lankstaus indo elementai naudoja šį modelį, jų dydžiai bus proporcingi nurodytam lankstumo koeficientui.

Demonstracija

Ši demonstracinė versija rodo labai paprastą „Flexbox“ išdėstymą turto dėka flex:

Čia yra šurmuliuojantis kodo bitas:

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

Pirma, mes leidome „flex“ elementus rodyti keliose eilutėse su flex-flow: row wrap.

Tada ir antraštei, ir poraštei nurodome paimti 100% dabartinio peržiūros srities pločio, nesvarbu.

Pagrindinis turinys ir abi šoninės juostos dalysis ta pačia eilute, pasidalindami likusia erdve taip: 66% (2 / (1 + 2)) pagrindiniam turiniui, 33% (1 / (1 + 2)) šoninei juostai .

Naršyklės palaikymas

  • (moderni) reiškia naujausią sintaksę iš specifikacijos (pvz. display: flex;)
  • (hibridas) reiškia nelyginę neoficialią sintaksę nuo 2011 m. (pvz. display: flexbox;)
  • (senas) reiškia seną sintaksę nuo 2009 m. (pvz. display: box;)
„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
21+ (modernus)
20- (senas)		 3.1+ (senas) 2–21 (senas)
22+ (naujas)		 12.1+ (moderni) 10+ (hibridas) 2.1+ (senas) 3,2+ (senas)

„Blackberry“ naršyklė 10+ palaiko naują sintaksę.

Norėdami gauti daugiau informacijos apie tai, kaip maišyti sintakses, kad gautumėte geriausią naršyklės palaikymą, skaitykite šį straipsnį (CSS-Tricks) arba šį straipsnį (DevOpera).