Flex - CSS-triks

Anonim

Den flexegenskapen er en under egenskap av Flexible Box Layout modul.

Dette er stenografien for flex-grow, flex-shrinkog flex-basis. Den andre og tredje parameteren ( flex-shrinkog flex-basis) er valgfri.

Syntaks

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

Her er oversikten over hva verdiene tilordnes, avhengig av hvor mange verdier du gir den:

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

Felles verdier for flex

flex: 0 auto;

Dette er det samme som flex: initial;og stenografi for standardverdi: flex: 0 1 auto. Den størrelser varen basert på dens width/ heightegenskaper (eller innholdet hvis det ikke er angitt).

Det gjør flex-elementet lite fleksibelt når det er noe ledig plass igjen, men lar det krympe til sitt minimum når det ikke er nok plass. Justeringsevnen eller automargene kan brukes til å justere bøyningselementer langs hovedaksen.

flex: auto;

Dette tilsvarer flex: 1 1 auto. Vær forsiktig, dette er ikke standardverdien. Det størrelser elementet basert på sine width/ heightegenskaper, men gjør det fullt fleksibel slik at de absorberer noe ekstra plass langs hovedaksen.

Hvis alle elementene er enten flex: auto, flex: initialeller flex: none, eventuelle gjenværende plass etter at elementene er dimensjonert vil bli fordelt jevnt på de elementer med flex: auto.

flex: ingen;

Dette tilsvarer flex: 0 0 auto. Den størrelser varen i henhold til dens width/ heightegenskaper, men gjør den fullstendig ufleksibel.

Dette ligner på flex: initialbortsett fra at det ikke er lov å krympe, selv ikke i en overløpssituasjon.

bøye:

Tilsvarer flex: 1 0px. Det gjør flex-elementet fleksibelt og setter flex-grunnlaget til null, noe som resulterer i et element som mottar den spesifiserte andelen av gjenværende plass.

Hvis alle elementene i flexcontaineren bruker dette mønsteret, vil størrelsene være proporsjonale med den angitte flexfaktoren.

Demo

Følgende demo viser et veldig enkelt oppsett med Flexbox takket være flexeiendommen:

Her er den avslørende biten av kode:

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

Først har vi godkjent at flex-elementer skal vises på flere rader med flex-flow: row wrap.

Så ber vi både topptekst og bunntekst om å ta 100% av gjeldende visningsportbredde, uansett hva.

Og hovedinnholdet og begge sidefelt vil dele samme rad, og dele den gjenværende plassen som følger: 66% (2 / (1 + 2)) for hovedinnholdet, 33% (1 / (1 + 2)) for sidefeltet .

Nettleserstøtte

  • (moderne) betyr den nylige syntaksen fra spesifikasjonen (f.eks. display: flex;)
  • (hybrid) betyr en merkelig uoffisiell syntaks fra 2011 (f.eks. display: flexbox;)
  • (gammel) betyr den gamle syntaksen fra 2009 (f.eks. display: box;)
Chrome Safari Firefox Opera DVS Android iOS
21+ (moderne)
20- (gammel)		 3.1+ (gammel) 2-21 (gammel)
22+ (ny)		 12.1+ (moderne) 10+ (hybrid) 2.1+ (gammel) 3.2+ (gammel)

Blackberry browser 10+ støtter den nye syntaksen.

For mer informasjon om hvordan du blander syntakser for å få best nettleserstøtte, se denne artikkelen (CSS-triks) eller denne artikkelen (DevOpera).