En komplett guide till Flexbox CSS-tricks

Bakgrund

Den Flexbox Layout(Flexible Box) modul (en W3C Candidate Recommendation i oktober 2017) syftar till att ge ett mer effektivt sätt att lägga ut, rikta och fördela utrymmet mellan objekt i en behållare, även om deras storlek är okänd och / eller dynamisk (alltså ordet ”flex”).

Huvudidén bakom flexlayouten är att ge behållaren möjlighet att ändra dess föremåls bredd / höjd (och ordning) för att bäst fylla det tillgängliga utrymmet (oftast för att rymma alla typer av visningsenheter och skärmstorlekar). En flexcontainer expanderar föremål för att fylla tillgängligt ledigt utrymme eller krymper dem för att förhindra överflöd.

Viktigast är att flexbox-layouten är riktningsagnostisk i motsats till de vanliga layouterna (block som är vertikalt baserat och inline som är horisontellt). Även om de fungerar bra för sidor saknar de flexibilitet (ingen ordlek avsedd) för att stödja stora eller komplexa applikationer (speciellt när det gäller orienteringsändring, storleksändring, sträckning, krympning etc.)

Obs! Flexbox-layout är bäst lämpad för komponenterna i en applikation och småskaliga layouter, medan rutnätlayouten är avsedd för layouter i större skala.

Grunder & terminologi

Eftersom flexbox är en hel modul och inte en enda egendom, involverar det många saker inklusive hela uppsättningen egenskaper. Några av dem är avsedda att placeras på behållaren (moderelement, känd som "flexcontainer") medan de andra är avsedda att placeras på barnen (sagt "flexartiklar").

Om "vanlig" layout baseras på både block- och inline-flödesriktningar, är flex-layouten baserad på "flex-flow-riktningar". Ta en titt på denna siffra från specifikationen och förklara huvudidén bakom flexlayouten.

Objekt läggs ut antingen efter main axis(från main-starttill main-end) eller tväraxeln (från cross-starttill cross-end).

huvudaxel - Huvudaxeln för en flexcontainer är den primära axeln längs vilken flexartiklar läggs ut. Akta dig, det är inte nödvändigtvis horisontellt; det beror på flex-directionfastigheten (se nedan).
huvudstart | main-end - flexartiklarna placeras i behållaren med start från main-start och till main-end.
huvudstorlek - En flex-artikels bredd eller höjd, beroende på vilken som är i huvuddimensionen, är artikelns huvudstorlek. Flexobjektets huvudstorleksegenskap är antingen egenskapen 'bredd' eller 'höjd', beroende på vilken som är i huvuddimensionen.
tväraxel - Axeln vinkelrät mot huvudaxeln kallas tväraxeln. Dess riktning beror på huvudaxelns riktning.
korsstart | tvärgående - Flex-linjer fylls med föremål och placeras i behållaren med början på tvärsidan av flexbehållaren och går mot tvärsidan.
tvärstorlek - Bredden eller höjden på en flexartikel, beroende på vilken som är i tvärmåttet, är artikelns tvärstorlek. Egenskapen för korsstorlek är vilken som helst av 'bredd' eller 'höjd' som finns i korsdimensionen.

Skaffa affischen!

Referera den här guiden mycket? Fäst en kopia på kontorsväggen.

Köp affisch

Egenskaper för föräldern
(flexcontainer)

visa

Detta definierar en flexbehållare; inline eller blockera beroende på det angivna värdet. Det möjliggör ett flexibelt sammanhang för alla sina direkta barn.

.container ( display: flex; /* or inline-flex */ )

Observera att CSS-kolumner inte har någon effekt på en flexcontainer.

flex-riktning

Detta etablerar huvudaxeln och definierar sålunda riktningen flexobjekt placeras i flexbehållaren. Flexbox är (förutom valfri inslagning) ett layoutkoncept med en riktning. Tänk på flexartiklar som att de läggs ut antingen i horisontella rader eller vertikala kolumner.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(standard): vänster till höger i ltr; höger till vänster inrtl
row-reverse: höger till vänster in ltr; vänster till höger inrtl
column: samma som rowmen uppifrån och ned
column-reverse: samma som row-reversemen från botten till toppen

flex-wrap

Som standard försöker flex-objekt att passa in på en rad. Du kan ändra det och låta artiklarna packas in efter behov med den här egenskapen.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (standard): alla flexobjekt kommer att finnas på en rad
wrap: flexartiklar lindas på flera rader, från topp till botten.
wrap-reverse: flexartiklar lindas på flera rader från botten till toppen.

Det finns några visuella demos flex-wraphär.

flex-flöde

Detta är en förkortning för flex-directionoch flex-wrapegenskaper, vilka tillsammans definierar den flex behållarens huvud- och tväraxlar. Standardvärdet är row nowrap.

.container ( flex-flow: column wrap; )

rättfärdiga-innehåll

Detta definierar inriktningen längs huvudaxeln. Det hjälper till att distribuera resterande ledigt utrymme när antingen alla flexartiklar på en linje är oflexibla eller är flexibla men har nått sin maximala storlek. Det utövar också viss kontroll över inriktningen av objekt när de överflödar linjen.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (standard): objekt packas mot början av flexriktningen.
flex-end: föremål packas mot slutet av flex-riktningen.
start: föremål packas mot början av writing-moderiktningen.
end: föremål packas mot slutet av writing-moderiktningen.
left: föremål packas mot behållarens vänstra kant, såvida det inte är meningsfullt med den flex-direction, då fungerar den som start.
right: föremål packas mot behållarens högra kant, såvida det inte är meningsfullt med den flex-direction, då beter den sig som end.
center: objekt är centrerade längs linjen
space-between: artiklar fördelas jämnt i raden; första posten är på startraden, sista posten på slutraden
space-around: objekt fördelas jämnt i raden med lika stort utrymme runt dem. Observera att mellanrummen visuellt inte är lika, eftersom alla artiklar har lika utrymme på båda sidor. Det första objektet kommer att ha en enhet av utrymme mot behållarens kant, men två enheter av mellanslag mellan nästa artikel eftersom nästa artikel har ett eget avstånd som gäller.
space-evenly: objekt fördelas så att avståndet mellan två objekt (och utrymmet till kanterna) är lika.

Observera att webbläsarstöd för dessa värden är nyanserat. Till exempel space-betweenfick jag aldrig stöd från vissa versioner av Edge, och start / slut / vänster / höger finns inte i Chrome än. MDN har detaljerade diagram. De säkraste värdena är flex-start, flex-endoch center.

Det finns också ytterligare två nyckelord som du kan para ihop med dessa värden: safeoch unsafe. Användning safesäkerställer att hur du än gör denna typ av positionering, så kan du inte trycka på ett sådant element att det gör att skärmen (t.ex. från toppen) gör att innehållet inte kan rullas också (kallas "dataförlust") .

justera-objekt

Detta definierar standardbeteendet för hur flexartiklar läggs ut längs tväraxeln på den aktuella linjen. Tänk på det som justify-contentversionen för tväraxeln (vinkelrät mot huvudaxeln).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (standard): sträck för att fylla behållaren (respektera fortfarande minbredd / maxbredd)
flex-start/ start/ self-start: föremål placeras i början av tväraxeln. Skillnaden mellan dessa är subtil och handlar om att respektera flex-directionreglerna eller writing-modereglerna.
flex-end/ end/ self-end: föremål placeras i slutet av tväraxeln. Skillnaden igen är subtil och handlar om att respektera flex-directionregler kontra writing-moderegler.
center: föremål är centrerade i tväraxeln
baseline: artiklarna är justerade, till exempel deras baslinjer

Den safeoch unsafemodifierings sökord kan användas tillsammans med resten av dessa sökord (även notera webbläsare stöd), och ta itu med att hjälpa dig att undvika att rikta element så att innehållet blir oåtkomliga.

anpassa innehåll

Detta justerar en flexcontainers linjer inom när det finns extra utrymme i tväraxeln, liknande det som justify-contentjusterar enskilda föremål inom huvudaxeln.

Obs! Den här egenskapen träder bara i kraft i flexibla behållare med flera rader, där den flex-flowär inställd på antingen wrapeller wrap-reverse). En flexibel behållare med en rad (dvs. där den flex-flowär inställd på standardvärdet, no-wrap) återspeglas inte align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (standard): objekt är förpackade i sin standardposition som om inget värde har ställts in.
flex-start/ start: föremål packade till början av containern. De (mer stödda) flex-startutmärkelserna flex-directionmedan startutmärkelsen writing-moderiktar sig.
flex-end/ end: föremål packade till slutet av containern. Det (mer stödet) flex-endhedrar flex-directionmedan änden hedrar writing-moderiktningen.
center: föremål centrerade i behållaren
space-between: artiklar jämnt fördelade; den första raden är i början av behållaren medan den sista är i slutet
space-around: objekt jämnt fördelade med lika utrymme runt varje rad
space-evenly: artiklar fördelas jämnt med lika stort utrymme runt dem
stretch: linjer sträcker sig för att ta upp det återstående utrymmet

Egenskaper för barnen
(flexartiklar)

ordning

Som standard anges flexartiklar i källordningen. Men orderstyr fastigheten i vilken ordning de visas i flex behållaren.

.item ( order: 5; /* default is 0 */ )

flex-grow

Detta definierar möjligheten för en flexartikel att växa om det behövs. Det accepterar ett enhetslöst värde som fungerar som en proportion. Det dikterar vilken mängd av det tillgängliga utrymmet inuti flexbehållaren objektet ska ta upp.

Om alla artiklar har flex-growställts in på 1 fördelas återstående utrymme i behållaren lika till alla barn. Om ett av barnen har ett värde på 2, skulle det återstående utrymmet ta dubbelt så mycket utrymme som de andra (eller det försöker åtminstone).

.item ( flex-grow: 4; /* default 0 */ )

Negativa siffror är ogiltiga.

flex-krympning

Detta definierar möjligheten för en flexartikel att krympa vid behov.

.item ( flex-shrink: 3; /* default 1 */ )

Negativa siffror är ogiltiga.

flex-bas

Detta definierar standardstorleken för ett element innan återstående utrymme distribueras. Det kan vara en längd (t.ex. 20%, 5rem, etc.) eller ett nyckelord. Den autosökords betyder ”titta på min bredd eller höjd egendom” (som tillfälligt görs av main-sizenyckelordet tills föråldrat). De contentsökord betyder ”storlek det baserat på objektets innehåll” - detta sökord inte bra stöd ännu, så det är svårt att testa och svårare att veta vad dess bröder max-content, min-contentoch fit-contentgöra.

.item ( flex-basis: | auto; /* default auto */ )

Om den är inställd 0, tas det extra utrymmet runt innehållet inte in. Om det är inställt på autofördelas det extra utrymmet baserat på dess flex-growvärde. Se den här bilden.

böja

Detta är stenografi för flex-grow, flex-shrinkoch flex-basiskombinerat. Den andra och tredje parametern ( flex-shrinkoch flex-basis) är valfria. Standard är 0 1 auto, men om du ställer in det med ett enda siffervärde är det som 1 0.

.item ( flex: none | ( ? || ) )

Det rekommenderas att du använder den här stenografiska egenskapen istället för att ställa in de enskilda egenskaperna. Kortformen ställer in andra värden på ett intelligent sätt.

anpassa-jag

Detta gör att standardjusteringen (eller den som anges align-items) kan åsidosättas för enskilda flexobjekt.

Se align-itemsförklaringen för att förstå de tillgängliga värdena.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Notera att float, clearoch vertical-alignhar ingen effekt på en flex objekt.

Exempel

Låt oss börja med ett väldigt enkelt exempel, lösa ett nästan dagligt problem: perfekt centrering. Det kan inte vara enklare om du använder flexbox.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

Detta förlitar sig på det faktum att en marginal som är inställd på autoi en flexcontainer absorberar extra utrymme. Så om du ställer in en vertikal marginal autokommer objektet att vara perfekt centrerat i båda axlarna.

Låt oss nu använda några fler egenskaper. Tänk på en lista med 6 artiklar, alla med fasta dimensioner, men kan automatiskt dimensioneras. Vi vill att de ska fördelas jämnt på den horisontella axeln så att när vi ändrar storlek på webbläsaren, skalas allt snyggt och utan mediefrågor.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Gjort. Allt annat är bara något stylingproblem. Nedan finns en penna med detta exempel. Var noga med att gå till CodePen och försöka ändra storlek på dina fönster för att se vad som händer.

Låt oss prova något annat. Tänk dig att vi har ett högerjusterat navigeringselement högst upp på vår webbplats, men vi vill att det ska vara centrerat på medelstora skärmar och enkolonnade på små enheter. Lätt nog.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Låt oss prova något ännu bättre genom att leka med flex-flexibilitet! Vad sägs om en mobil-första 3-kolumn layout med sidhuvud och sidfot i full bredd. Och oberoende av källordning.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Prefixing Flexbox

Flexbox kräver viss leverantörsprefix för att stödja flest möjliga webbläsare. Det inkluderar inte bara förutbestämda fastigheter med leverantörsprefixet, men det finns faktiskt helt olika fastighets- och värdenamn. Detta beror på att Flexbox-specifikationen har förändrats över tiden och skapat en "gammal", "tweener" och "ny" version.

Det bästa sättet att hantera detta är kanske att skriva i den nya (och sista) syntaxen och köra din CSS genom Autoprefixer, som hanterar fallbackarna mycket bra.

Alternativt är här en Sass för @mixinatt hjälpa till med en del av prefixet, vilket också ger dig en uppfattning om vilken typ av saker som behöver göras:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Relaterade egenskaper

En komplett guide till rutnät
Almanackposter på rutnätegenskaper, som rutnät / rutnät

Andra resurser

Flexbox i CSS-specifikationerna
Flexbox vid MDN
Flexbox på Opera
Dykning i Flexbox av Bocoup
Blandar syntaxer för bästa webbläsarsupport på CSS-Tricks
Flexbox av Raphael Goetter (FR)
Flexplorer av Bennett Feely

Fel

Flexbox är verkligen inte utan buggar. Den bästa samlingen av dem jag har sett är Philip Walton och Greg Whitworths Flexbugs. Det är en öppen källkod för att spåra dem alla, så jag tycker att det är bäst att bara länka till det.

Webbläsarstöd

Uppdelad av “version” av flexbox:

(ny) betyder den senaste syntaxen från specifikationen (t.ex. display: flex;)
(tweener) 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	Kant	Android	iOS
20- (gammal) 21+ (ny)	3.1+ (gammal) 6.1+ (ny)	2-21 (gammal) 22+ (ny)	12.1+ (nytt)	10 (tweener) 11+ (ny)	17+ (ny)	2.1+ (gammal) 4.4+ (ny)	3.2+ (gammal) 7.1+ (ny)

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