Flex - CSS-tricks

Den flexegenskapen är en sub-egenskap hos den flexibla Box Layout modul.

Detta är förkortningen för flex-grow, flex-shrinkoch flex-basis. Den andra och tredje parametern ( flex-shrinkoch flex-basis) är valfria.

Syntax

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

Här är scoop på vad värdena till beroende på hur många värden du ger 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

Gemensamma värden för flex

flex: 0 auto;

Detta är samma som flex: initial;och förkortning för standardvärdet: flex: 0 1 auto. Den dimensionerar artikeln baserat på dess width/ heightegenskaper (eller dess innehåll om den inte är inställd).

Det gör flexartikeln oflexibel när det finns lite ledigt utrymme kvar, men låter det krympa till sitt minimum när det inte finns tillräckligt med utrymme. Justeringsförmågan eller automarginalerna kan användas för att justera flexobjekt längs huvudaxeln.

flex: auto;

Detta motsvarar flex: 1 1 auto. Akta dig, detta är inte standardvärdet. Den dimensionerar artikeln baserat på dess width/ heightegenskaper, men gör den helt flexibel så att de absorberar extra utrymme längs huvudaxeln.

Om alla artiklar är antingen flex: auto, flex: initialeller flex: none, resteras eventuellt återstående utrymme efter att objekten har dimensionerats jämnt till objekten med flex: auto.

flex: ingen;

Detta motsvarar flex: 0 0 auto. Den dimensionerar artikeln efter dess width/ heightegenskaper, men gör den helt oflexibel.

Detta liknar flex: initialförutom att det inte får krympa, inte ens i en överflödssituation.

böja:

Motsvarar flex: 1 0px. Det gör flex-objektet flexibelt och sätter flex-basen till noll, vilket resulterar i ett objekt som får den angivna andelen av återstående utrymme.

Om alla artiklar i flexcontainern använder detta mönster kommer deras storlekar att vara proportionella mot den angivna flexfaktorn.

Demo

Följande demo visar en mycket enkel layout med Flexbox tack vare flexfastigheten:

Här är den uppenbara biten av kod:

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

Först har vi godkänt flex-objekt som ska visas på flera rader med flex-flow: row wrap.

Sedan säger vi till både sidhuvudet och sidfoten att ta 100% av den aktuella visningsportbredden, oavsett vad.

Och huvudinnehållet och båda sidofältet delar samma rad och delar det återstående utrymmet enligt följande: 66% (2 / (1 + 2)) för huvudinnehållet, 33% (1 / (1 + 2)) för sidofältet .

Webbläsarstöd

• (modern) betyder den senaste syntaxen från specifikationen (t.ex. display: flex;)
• (hybrid) betyder en udda inofficiell syntax från 2011 (t.ex. display: flexbox;)
• (gammal) betyder den gamla syntaxen från 2009 (t.ex. display: box;)

Krom	Safari	Firefox	Opera	IE	Android	iOS
21+ (modern) 20- (gammal)	3.1+ (gammal)	2-21 (gammal) 22+ (ny)	12.1+ (modern)	10+ (hybrid)	2.1+ (gammal)	3.2+ (gammal)

Blackberry webbläsare 10+ stöder den nya syntaxen.

För mer information om hur man blandar syntaxer för att få bästa webbläsarstöd, se den här artikeln (CSS-Tricks) eller den här artikeln (DevOpera).