Joustava - CSS-temppuja

flexOminaisuus on osa-ominaisuus Flexible Box Asettelu moduuli.

Tämä on lyhenteenä flex-grow, flex-shrinkja flex-basis. Toinen ja kolmas parametri ( flex-shrinkja flex-basis) ovat valinnaisia.

Syntaksi

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ässä on kauha siihen, mihin arvot vastaavat, riippuen siitä, kuinka monta arvoa annat sille:

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

Yhteiset arvot arvolle flex

taipuma: 0 auto;

Tämä on sama kuin flex: initial;ja lyhenteenä oletusarvo: flex: 0 1 auto. Se kokoaa kohteen sen ominaisuuksien width/ heightominaisuuksien (tai sisällön mukaan, jos sitä ei ole asetettu).

Se tekee joustavasta esineestä joustamattoman, kun tilaa on jäljellä, mutta antaa sen kutistua minimiinsä, kun tilaa ei ole tarpeeksi. Kohdistuskykyjä tai automarginaaleja voidaan käyttää joustavien kohteiden kohdistamiseen pääakselia pitkin.

joustava: auto;

Tämä vastaa flex: 1 1 auto. Varo, tämä ei ole oletusarvo. Se koot kohde perustuu sen width/ heightominaisuuksia, mutta tekee siitä täysin joustavia, jotta ne imevät ylimääräistä tilaa pääakselia pitkin.

Jos kaikki tuotteet ovat joko flex: auto, flex: initialtai flex: nonemikä tahansa jäljellä oleva tila erien jälkeen on mitoitettu jaetaan tasan kohteiden kanssa flex: auto.

joustava: ei mitään;

Tämä vastaa flex: 0 0 auto. Se koot kohde mukaan sen width/ heightominaisuuksia, mutta tekee siitä täysin joustamaton.

Tämä on samanlainen kuin, flex: initialpaitsi että sen ei saa kutistua edes ylivuototilanteessa.

joustava:

Vastaa flex: 1 0px. Se tekee joustavasta tuotteesta joustavan ja asettaa joustavan perustan nollaksi, jolloin kohde saa määritetyn osan jäljellä olevasta tilasta.

Jos kaikki joustosäiliön tuotteet käyttävät tätä mallia, niiden koot ovat verrannollisia määritettyyn joustokertoimeen.

Demo

Seuraava esittely näyttää erittäin yksinkertaisen asettelun Flexboxilla flexkiinteistön ansiosta :

Tässä on revelant koodibitti:

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

Ensinnäkin olemme sallineet joustavien kohteiden näyttämisen useilla riveillä flex-flow: row wrap.

Sitten käskemme sekä otsikkoa että alatunnistetta ottamaan 100% nykyisestä näkymän leveydestä riippumatta siitä.

Ja pääsisältö ja molemmat sivupalkit jakavat saman rivin jakamalla jäljellä oleva tila seuraavasti: 66% (2 / (1 + 2)) pääsisällölle, 33% (1 / (1 + 2)) sivupalkille .

Selaimen tuki

• (moderni) tarkoittaa viimeisintä syntaksia spesifikaatiosta (esim. display: flex;)
• (hybridi) tarkoittaa outoa epävirallista syntaksia vuodelta 2011 (esim. display: flexbox;)
• (vanha) tarkoittaa vanhaa syntaksia vuodelta 2009 (esim. display: box;)

Kromi	Safari	Firefox	Ooppera	IE	Android	iOS
21+ (moderni) 20 - (vanha)	3.1+ (vanha)	2-21 (vanha) 22+ (uusi)	12.1+ (moderni)	10+ (hybridi)	2.1+ (vanha)	3.2+ (vanha)

Blackberry-selain 10+ tukee uutta syntaksia.

Lisätietoja syntaksien sekoittamisesta parhaan selaintuen saamiseksi on tässä artikkelissa (CSS-Tricks) tai tässä artikkelissa (DevOpera).