Elastība - CSS-triki

flexĪpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.

Šis ir stenogrāfs flex-grow, flex-shrinkun flex-basis. Otrais un trešais parametrs ( flex-shrinkun flex-basis) nav obligāti.

Sintakse

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

Tālāk ir aprakstīts, kā vērtības tiek attēlotas atkarībā no tā, cik vērtības jūs tam piešķirat:

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

Kopīgas vērtības flex

elastība: 0 auto;

Tas ir tas pats, flex: initial;un saīsinājums noklusējuma vērtība: flex: 0 1 auto. Tas palielina vienumu, pamatojoties uz tā width/ heightīpašībām (vai saturu, ja tas nav iestatīts).

Tas padara elastīgo priekšmetu neelastīgu, ja ir atlicis nedaudz brīvas vietas, bet ļauj tam sarauties līdz minimumam, ja vietas nav pietiekami daudz. Izlīdzināšanas spējas vai autopiemales var izmantot, lai izlīdzinātu elastīgos priekšmetus gar galveno asi.

elastība: auto;

Tas ir līdzvērtīgs flex: 1 1 auto. Uzmanieties, tā nav noklusējuma vērtība. Tas izmēra priekšmetu, pamatojoties uz tā width/ heightīpašībām, bet padara to pilnībā elastīgu, lai tie absorbētu jebkādu papildu vietu gar galveno asi.

Ja visi vienumi ir vai nu flex: auto, flex: initialvai flex: none, pēc priekšmetu izmēra atlikusī vieta tiks vienmērīgi sadalīta vienumiem ar flex: auto.

elastība: nav;

Tas ir līdzvērtīgs flex: 0 0 auto. Tas izmēra priekšmetu atbilstoši tā width/ heightīpašībām, bet padara to pilnīgi neelastīgu.

Tas ir līdzīgi kā flex: initialtas, ka nav atļauts sarukt pat pārplūdes situācijā.

elastība:

Līdzvērtīgs flex: 1 0px. Tas padara elastīgo vienumu elastīgu un elastības pamatu nosaka uz nulli, kā rezultātā vienums saņem norādīto atlikušās vietas daļu.

Ja visi elastīgā konteinera vienumi izmanto šo modeli, to izmēri būs proporcionāli norādītajam elastības koeficientam.

Demonstrācija

Šajā flexīpašumā, pateicoties īpašumam, parādīts ļoti vienkāršs izkārtojums ar Flexbox :

Šeit ir gaviļīgais koda bits:

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

Pirmkārt, mēs esam atļāvuši elastīgos vienumus rādīt vairākās rindās ar flex-flow: row wrap.

Tad mēs iesakām gan galvenei, gan kājenei uzņemt 100% no pašreizējā skata platuma neatkarīgi no tā.

Un galvenajam saturam un abām sānjoslām būs viena rinda, sadalot atlikušo vietu šādi: 66% (2 / (1 + 2)) galvenajam saturam, 33% (1 / (1 + 2)) sānjoslai. .

Pārlūka atbalsts

• (mūsdienu) nozīmē neseno sintaksi no specifikācijas (piem. display: flex;)
• (hibrīds) ir nepāra neoficiāla sintakse no 2011. gada (piem. display: flexbox;)
• (vecs) nozīmē veco sintaksi no 2009. gada (piem. display: box;)

Chrome	Safari	Firefox	Opera	IE	Android	iOS
21+ (mūsdienu) 20 - (vecs)	3.1+ (vecs)	2–21 (vecs) 22+ (jauns)	12,1+ (mūsdienu)	10+ (hibrīds)	2.1+ (vecs)	3,2+ (vecs)

Blackberry pārlūks 10+ atbalsta jauno sintaksi.

Lai iegūtu papildinformāciju par sintakses sajaukšanu, lai iegūtu vislabāko pārlūkprogrammas atbalstu, lūdzu, skatiet šo rakstu (CSS-Tricks) vai šo rakstu (DevOpera).