Flex - CSS-tricks

Anonim

Den flexegenskab er en sub-egenskab af Flexible Box layout modul.

Dette er stenografien for flex-grow, flex-shrinkog flex-basis. Den anden og tredje parameter ( 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 scoop om, hvad værdierne tilordnes, afhængigt af hvor mange værdier du giver det:

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

Fælles værdier for flex

flex: 0 auto;

Dette er det samme som flex: initial;og forkortelse for standardværdien: flex: 0 1 auto. Det størrelser elementet baseret på dets width/ heightegenskaber (eller dets indhold, hvis det ikke er indstillet).

Det gør flex-elementet fleksibelt, når der er noget ledig plads tilbage, men giver det mulighed for at krympe til sit minimum, når der ikke er nok plads. Justeringsevnerne eller automargenerne kan bruges til at justere bøjningselementer langs hovedaksen.

flex: auto;

Dette svarer til flex: 1 1 auto. Pas på, dette er ikke standardværdien. Det størrelser elementet baseret på dets width/ heightegenskaber, men gør det fuldt fleksibelt, så de absorberer ekstra plads langs hovedaksen.

Hvis alle varer er enten flex: auto, flex: initialeller flex: none, vil enhver resterende plads, efter at varerne er blevet dimensioneret, fordeles jævnt på varerne med flex: auto.

flex: ingen;

Dette svarer til flex: 0 0 auto. Det størrelser varen efter dens width/ heightegenskaber, men gør den fuldstændig ufleksibel.

Dette svarer til, flex: initialbortset fra at det ikke er tilladt at krympe, selv i en situation med overløb.

flex:

Svarer til flex: 1 0px. Det gør flex-elementet fleksibelt og sætter flex-basis til nul, hvilket resulterer i et element, der modtager den specificerede andel af den resterende plads.

Hvis alle genstande i flexcontaineren bruger dette mønster, vil deres størrelser være proportionale med den angivne flexfaktor.

Demo

Følgende demo viser et meget simpelt layout med Flexbox takket være flexejendommen:

Her er den afslørende bit kode:

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

For det første har vi godkendt, at flex-emner skal vises på flere rækker med flex-flow: row wrap.

Derefter beder vi både sidehovedet og sidefoden om at tage 100% af den aktuelle visningsportbredde, uanset hvad.

Og hovedindholdet og begge sidepaneler deler den samme række og deler den resterende plads som følger: 66% (2 / (1 + 2)) for hovedindholdet, 33% (1 / (1 + 2)) til sidepanelet .

Browsersupport

  • (moderne) betyder den nylige syntaks fra specifikationen (f.eks. display: flex;)
  • (hybrid) betyder en ulige uofficiel syntaks fra 2011 (f.eks. display: flexbox;)
  • (gammel) betyder den gamle syntaks fra 2009 (f.eks. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderne)
20- (gamle)		 3.1+ (gammel) 2-21 (gammel)
22+ (ny)		 12.1+ (moderne) 10+ (hybrid) 2.1+ (gammel) 3.2+ (gammel)

Blackberry browser 10+ understøtter den nye syntaks.

For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).