Låt mig säga det här först: flexbox är enkelt. Oavsett om det beror på tidiga adoptionsproblem eller för att vi har lärt oss att tänka när det gäller floats och block, hör jag ofta från webbdesigners att de tycker att Flexbox är komplicerat att implementera. Men jag upprepar: flexbox är enkelt.
Det finns ett knep för att förstå flexbox som jag lär dig, varefter allt kommer att vara klart. Men först vill jag prata om vad flexbox är.
Flexbox (eller Flexibel Box Layout Module för att ge det sitt korrekta namn) är en uppsättning CSS-egenskaper som kombinerar att lägga ut innehåll på ett lyhörd sätt.
Flexbox är den första CSS-layouttekniken som fungerar för den moderna webben. Det är rättvist att säga det tills flexbox stöddes, det fanns ingen layoutteknik som fungerade bra med lyhörd webbdesign.
Massor av hack har blivit flytande, liksom inställningselement som ska visas: inline-block och låter dem vikas. Men detta presenterade ett antal problem för flexibla områden, inte minst bristen på kontroll och knock-on effekten av elementets storlek. Av denna anledning använder många mottagliga webbplatser fortfarande JavaScript för att placera innehåll.
Flexbox beskrivs av W3C som avsedd att lägga ut UI-element - saker som menyalternativ - det är inte avsett att lägga ut hela sidor.
Anledningen till att den inte är avsedd för layout ut hela sidor, är att flexbox har en companion CSS-modul, den Grid Layout Module vilket är avsett för layout. Grid Layout anses vara den mest lämpliga tekniken för fullständiga sidlayouter. Tyvärr finns det mycket begränsat stöd för nätet för närvarande, och med "begränsat" menar jag "ingen". Även den senaste versionen av Chrome misslyckas med att stödja den utan flaggor.
Lyckligtvis är webbläsarsupport för flexbox mycket mer omfattande. Och eftersom det löser så många moderna layoutproblem är flexbox ett idealiskt verktyg tills gridet äntligen antas.
Flexbox är idealisk för styling av komponenter på en sida. Flexboxens verkliga kraft, och anledningen till att den fungerar så mycket bättre än andra layoutalternativ, kommer från att förklara stilar på grupper av objekt istället för enskilda objekt.
När det gäller layout behöver vi sällan placera ett enda objekt - om vi planerar att göra det är det mycket bättre att använda positionering. Flexbox fungerar bäst när det kontrollerar hur grupper av element relaterar till varandra.
Alltid utforma en sak genom att överväga den i sitt nästa större sammanhang - en stol i ett rum, ett rum i ett hus, ett hus i en miljö, en miljö i en stadsplan. - Eliel Saarinen
Som sådan är flexboxspecifikationen uppdelad i två delar, en uppsättning egenskaper som hänvisar till behållarelementet och en uppsättning egenskaper som hänvisar till elementen inom.
Browserstöd är vanligtvis en komplex fråga. Gjorde det mer komplexa för flexbox eftersom flexbox har flera olika syntaxer. Tidig obestridighet, oberoende utveckling av vissa webbläsarleverantörer och en iterativ process har lämnat oss med flera olika versioner av flexbox som alla behöver tillgodoses.
Lyckligtvis, med tillägg av vissa webbläsarprefix för äldre webbläsare, kan vi nu förlita oss på det. Enligt caniuse.com , av nuvarande vanliga webbläsare bara IE9 kommer att presentera ett problem för oss.
Lyckligtvis, som alla CSS, om flexbox misslyckas, misslyckas det tyst. Det betyder att IE9 bara kommer att ignorera det.
Tack vare en överväldigande brist på samarbete mellan olika grenar av kommittéer och företag har flexboxs genomförande nästan rivaliserat kaoset från början av 00-talet när varje webbläsare implementerade varje enskild egendom unikt och felaktigt samtidigt. Flexboxs tre implementeringar var helt enkelt en iterativ tillvägagångssätt som har resulterat i den mest användbara gemensamma lösningen.
Det finns tre versioner av flexboxsyntaxen som du måste vara medveten om: gammal, mellan och ny. Olika webbläsare stöder olika syntaxer, IE10 stöder exempelvis den mellanliggande syntaxen.
Precis som webbläsarprefixar, skriver vi Flexbox-syntax från äldsta till nyaste, så att den nyast stödda syntaxen åsidosätter de äldre syntaxerna.
Till exempel skriver vi skärm: flex som så:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/För tydlighetens skull kommer jag inte att dyka in i de äldre syntaxerna, eller debattera fördelarna med förbehandlare, efterbehandlare och olika konverteringsskript. I alla mina exempel ska jag använda rätt, ny syntax.
När det gäller produktionskod använder jag en serie Sass mixins för att utöka flexboxstöd till äldre webbläsare.
Det är en utmärkt Sass mixin här , som du antingen kan använda för att förhindra att din kod blockerar eller extrahera den gamla syntaxen.
Hemligheten hos flexbox är att det inte är en låda alls. Hittills har alla layouter på webben använt ett kartesiskt system med x och y för att plotta punkter. Flexbox är däremot en vektor.
Låter bra, eller hur? Flexbox är en vektor, vilket innebär att vi definierar en längd och vi definierar en vinkel. Vi kan ändra vinkeln utan att påverka längden; och vi kan ändra längden utan att påverka vinkeln.
Denna nya metod innebär att en del av flexboxens terminologi är initialt komplex. Till exempel, när vi inriktar objekt på toppen av en flexbehållare, använder vi flex-start, inte topp- eftersom om vi ändrar orienteringen, kommer flex-start fortfarande att gälla, men toppen kommer inte.
När du förstår detta tillvägagångssätt, avlägsnas mycket av flexboxen.
Flexboxs syntax är uppdelad i två grupper: de egenskaper som styr behållaren och de egenskaper som styr containerens direkta efterkommande. Den förra är den mest användbara, så låt oss börja där.
Låt oss säga att vi vill rymma saker inom ett block. Vi vill ha dem åtskilda jämnt. Med flexbox är det väldigt lätt att göra. Det första vi behöver är en del markering för att prova på det här:
Flexbox Layout Det är en enkel HTML-sida , med en hus div, som innehåller fem rumsavdelningar som var och en har en klass som identifierar sin funktion, kök, tvättrum, vardagsrum och sovrum.
Vad vi ska göra är att huset ska vara en flexboxbehållare. Eventuella flexboxegenskaper vi ställer in på huset kommer då att appliceras på sina barn ( rummets s).
För att utforma rummet s måste vi först förklara huset som en flexboxbehållare och berätta sedan hur vi vill att barnelementen ska ordnas.
Att förklara hus som en flexboxbehållare använder vi följande kod:
.house {background:#FF5651;display:flex;}Och det är allt. Vi har skapat en flexibel ruta. Allt vi behöver göra nu är att berätta flexbox hur du lägger ut rummet s. Vi kan göra det med att använda rättighetsinnehållet.
motivera innehållet har fem möjliga värden: center, flex-start, flex-end, space-around och mellanslag. Dessa centrera objekten, anpassa dem till början (som är antingen överst eller vänster, som vi kommer att diskutera nedan), slutet (vilket är antingen botten eller höger), rymmer dem med lika stort utrymme runt varje objekt, eller med lika stort utrymme mellan respektive objekt.
Vi använder platsutrymme:
.house {background:#FF5651;display:flex;justify-content: space-around;}Här är en demo . Lägg märke till hur det finns dubbelt utrymmet mellan objekten som finns på de två yttre kanterna? Det beror på att varje artikel har samma utrymme till vänster och till höger. Om vi hade använt utrymme-i stället skulle det inte finnas något utrymme på kanterna.
Jag är inte säker på dig, men tvättrummet i mitt hus är lite mindre än loungen, och även om jag har ett litet kök, skulle jag älska en mycket större. Så låt oss göra några tillägg till vår kod för att återspegla det:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Som du kan se in detta exempel , våra rum är fortfarande jämnt fördelade. Även om vi har ändrat storleken. Flexbox är briljant för att organisera innehåll.
Som vi diskuterade ovan är en av anledningarna till att flexbox fungerar så bra för designers att den beskrivs som en vektor. För närvarande stöder flexbox endast fyra vinklar: 0, 90, 180 och 270 grader. Så det är mycket enklare att tänka på dem som en axel.
För att ändra axeln använder vi egenskapen flex-riktning , som har fyra möjliga värden: rad (standardvärdet - som du kan se i exemplen ovan är våra rum placerade ut från vänster till höger), radomvända, kolumn och kolumn-omvänd.
Om vi ändrar flexriktningen till kolumnen ser du i den här demo att rummen nu ligger vertikalt, uppifrån och nedåt:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Som jag är säker på att du kan gissa, rygg-omvänd och kolumn-bakåt, vänd omordningen på objekten i din flexbehållare.
Du märker i det sista exemplet att medan huset sträcker sig hela vägen över visningsporten sträcker den sig till full höjd, även när den är inställd på flexriktning: kolumn.
För att kunna spela bra med CSS 'kartesianbaserade koordinatsystem behandlas flexboxbehållaren som ett blocknivåelement.
Precis som display: block har en följeseddel : inline-block, så att visa: flex har display: inline-flex.
inline-flex är för närvarande mest användbar om du släpper flexbox-element i en befintlig layout och du behöver det för att fungera bra med floats och positionerade element.
Som vi sett har flexbox ingen aning om det ligger horisontellt eller vertikalt, beroende på vilken riktning du väljer anses vara flexboxens primära axel.
Men flexbox tillåter oss också att styra positionen längs motsatt, sekundär axel.
Positionen på sekundäraxeln styrs av egenskapen justeringsobjekt. den har fem möjliga värden: baslinje, center, flex-end, flex-start och stretch.
baslinjen är normalt det mest användbara alternativet. Det säkerställer att textlinjens baslinjer stiger upp. För att testa detta måste vi göra några ändringar i vår HTML-fil:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomDu får se att jag har lagt till lite text och importerat och tillämpat sedan en Google-typsnitt. Jag har också ändrat typstorleken i köket och tvättrummet så det är tydligt skillnad.
När vi anger egenskapen justeringsobjekt till baslinjen ser du i den här demo att textens grundlinje matchar.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}align-items: center center aligns, antingen vertikalt (om flex-riktning: rad eller flex-riktning: row-back ) eller horisontellt (om flex-riktning: kolumn eller flex-riktning: kolumn-bakåt ). Här är en demo.
justeringspunkter: flex-start justerar sig till toppen och justeringar: flex-end justeras till botten (om flex-riktning: rad eller flex-riktning: rad-bakåt ) eller till vänster och höger (om flex-riktning: kolumn eller flex-riktning: kolumn-bakåt ). Här är en demo.
stretch, är ett annat mycket användbart alternativ. sträckningen kommer att ändra storlek på objekten, så att var och en har samma höjd (de kommer att växa, inte krympa). Här är en demo.
I våra andra exempel har vi uttryckligen ställt in höjden på objekten, vilket är tillräckligt för att åsidosätta flexbox, så att vi ser justeringsobjekten: sträcka sig på rätt sätt måste du ta bort höjden från alla klasser utom en.
Hittills har vi använt flexbox till layoutelement så att de ändras över rymden, men vad händer när innehållet i objekten är för stort för att passa på en rad?
För att demo detta kommer jag att öka storleken på mina rum:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomhär är hur det ser ut nu.
Om du krymper ditt webbläsarfönster ser du att innehållet blir avskuret, eftersom det inte finns plats för det. Lyckligtvis definierar flexbox en flex-wrap egenskap för just denna händelse, som har tre möjliga värden: no-wrap (standard), wrap och wrap-reverse.
wrap orsakar några objekt som skulle sträcka sig bortom behållaren för att linda på en efterföljande linje, precis som en rad textomslag.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Om du klämmer ner webbläsaren ser du i den här demo Artiklarna lägger nu på nya linjer. Lägg märke till hur justeringsalternativen: grundlinjeegenskapen fortfarande tillämpas? Flexboxs verkliga kraft är att kombinera sina egenskaper.
Ett viktigt begrepp, som jag kommer att täcka senare, är att flex-wrap: wrap-reverse vrider inte ordningen av föremålen, det orsakar några objekt som skulle sträcka sig bortom behållaren för att linda på en tidigare linje, som sedd i den här demo .
Som många CSS-egenskaper har vissa flexbox-egenskaper kortversioner som implementeras mer konsekvent av webbläsare.
Flexflödesegenskapen är stenografi för flexriktnings- och flex-wrap- egenskaperna. Så istället för att skriva:
flex-direction:row-reverse;flex-wrap:wrap;Vi kan använda stenografi:
flex-flow:row-reverse wrap;Ovan använde vi egenskapen justeringsobjekt för att justera objekt till grundlinjen, positionen och sträckningen. Som du kan se i det sista exemplet är det fortfarande kvar, men det sker på linjebasis.
När våra föremål har förpackats har vi möjlighet att ställa in hur de läggs ut på sekundäraxeln om behållaren är större än vad som krävs.
Om vi sätter minhöjden på vårt hus till 1200px, vår layout ser ut så här .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Vi kan nu använda egenskapen justeringsinnehåll för att lägga ut objekten över hela sekundäraxeln.
Justeringsinnehållsegenskapen har sex inställningar: center, flex-end, flex-start, space-runt, mellanslag och sträcka. Dessa värden ger samma resultat som på andra ställen: centrering, anpassning till ena änden, jämn fördelning eller sträckning.
Här är en demo med fastigheten inställd på rymd-runt.
Hittills har alla de egenskaper vi har tittat på ställts in på behållarelementet. För att finjustera objekt ger flexbox oss också ett antal egenskaper som kan ställas in på enskilda objekt.
För att klargöra detta, låt oss ta bort några av vår kod:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomhär är hur det ser ut.
Den första egenskapen för flexbox-objektet är den förvirrande namnet flexegenskapen . flex är ett värde på displayegenskapen på behållaren, men det är också en egenskap i sig själv.
Flexegenskapen är stenografi för flex-grow, flex-shrink och flex- basegenskaperna. Dessa egenskapers roll är att sträcka eller squash innehållets storlek så att det fyller utrymmet helt.
Flex-grow- egenskapen anger de objekt som de kan förstora, om så krävs, så att objekten fyller bredden (för flexriktning: rad ) och höjden (för flexriktning: kolumn ) helt.
Flex-grow- fastigheten tar ett förhållande. Så om vi sätter flex-grow- egenskapen till 1, kommer alla våra produkter att vara lika stora som du kan se här .
.room {background:#00AAF2;height:90px;flex-grow:1;}Förutom att ha samma storlek, kan vi också ställa in olika förhållanden. Jag vill fortfarande att mitt kök ska vara större än mitt tvättrum, så låt oss fixa det i den här demo .
.kitchen {height:300px;flex-grow:2;}flex-krympa fungerar exakt som flex-växa, förutom att det krymper objektet vid behov, istället för att expandera det.
Om du ändrar storlek på webbläsaren ser du att i olika storlekar är mitt kök inte precis dubbelt bredden på det andra rummet s. Det beror på flexbasisegenskapen .
flex-basis bestämmer hur flex-grow och flex-shrink egenskaper beräknas. Den har 2 värden: auto (standard) och 0.
Om den är inställd på 0, beaktas hela objektet. Om det är inställt på auto är det vadderingens innehåll som ändrats. Med andra ord ignorerar 0 storleken på objektets innehåll vid beräkning och automatiskt tar hänsyn till det. Det finns en praktiskt diagram tillhandahålls av W3C som förklarar detta.
Här är en demo av vad som händer när jag ställer flexbasis: 0 på ovanstående exempel.
flex-basis: 0 är särskilt användbart om du vill rymma objekt jämnt, oavsett innehåll.
Som sagt ovan är flexegenskapen en stenografi för dessa egenskaper, och du finner det som det mest tillförlitliga sättet att ställa in dessa värden.
Ordningsvärdet är flex-grow, flex-shrink, flex-basis. Så, för att ange ett växlingsvärde på 2, ett krympningsvärde på 1 och en bas av 0, skulle du använda:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}En av de bästa egenskaperna hos flexbox är dess förmåga att ändra ordning på objekt, utan att påverka markeringen. Det här är särskilt användbart för tillgänglighet, eftersom det tillåter oss att koda på lämpligt sätt och sedan visa det optimalt.
För att göra detta använder vi objektets orderegenskap.
Titta på vårt exempel är tvättrummet precis bredvid köket. Jag skulle hellre det var bredvid sovrummen, så jag kan hoppa rakt in på morgonen duschen, så låt oss flytta den. Det är för närvarande det andra objektet, vi vill att det ska vara det tredje. Så vi bestämmer sin order egendom i enlighet därmed i den här demo .
.washroom {height:60px;order:2;}Se hur det hoppade hela vägen till slutet av raden? Det är bredvid sovrummen, men inte hur vi tänkte. Detta är en stor gotcha i flexbox, eftersom många utvecklare (med medföljer) förväntar sig att order ska fungera som en array.
order fungerar faktiskt som CSS ' z-index, vilket innebär att om du inte uttryckligen ställer en order för ett objekt antas det vara lägre i ordningen än ett objekt för vilket ett värde uttryckligen har ställts in.
Vi vill att tvättrummet ska byta med loungen, så i den här demo De enda andra föremålen som behöver en beställning är sovrummet s.
.washroom {height:60px;order:2;}.bedroom {order:3;}Lägg märke till hur båda sovrummen delar samma ordernummer? I sådana fall kommer webbläsaren att falla tillbaka på DOM-ordern.
Den sista objektegenskapen är just -själv. Det används för att ändra objektets inriktning på sekundäraxeln. align-items används för att justera alla objekt, och den här egenskapen ger dig möjlighet att välja bort den blanketinställningen.
Det tar samma fem värden som motsvarande egenskap på behållaren: baslinje, center, flex-end, flex-start och stretch.
Här är en demo av tvättrummet justeras igen.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox är ett kraftfullt alternativ för att lägga ut innehåll. Även om det inte är avsett att lägga ut hela sidor, gör det överlägset stöd till Grid Layout det ett bra alternativ, särskilt för mobila första webbplatser.
För att demonstrera ska vi sammanställa en enkel sida som använder några av de tekniker som beskrivs ovan.
Först upp är vår uppmärkning, och några grundläggande stilar för sidan.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Som du kan se , Jag har en div med id- sidan. Insidan har jag en orörd lista över nyheter. Efter nyheterna har jag rubriken, som ligger under nyhetsinnehållet till fördel för tillgängligheten. Slutligen har jag en sidfot.
Det första jag vill göra är att flytta rubriken upp till toppen av sidan. För att göra så ställer vi in sidan för att vara en flexboxbehållare. Sedan ställer vi in riktningen till kolumnen. Tilldela sedan en order till var och en av sidans barnelement.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Nästa steg är att lägga ut rubriken. Barnelement i flexboxbehållare kan vara flexboxbehållare i sin egen rätt, så vi kan använda flexbox för att jämnt placera huvudelementen.
Låt oss ställa in rubriken för att vara en flexboxbehållare, låt oss sedan rymma innehållet jämt, utan extra vaddering på sidorna, och till sist får vi se till att menyalternativen ligger på samma baslinje som logotypen.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Våra nyhetsartiklar kommer att vara platshållare för utmärkta berättelser, så de måste vara en stor storlek för att göra plats för text och en bild eller video. Så vi behöver dem att sätta ihop.
Låt oss ange news div som en flexboxbehållare. Låt oss nu ge nyheterna lite minsta dimensioner och lite färg så vi kan se dem tydligt.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Nu måste vi ställa in nyhetsbehållaren att sätta ihop, och newsItem s att expandera för att fylla tillgängligt ledigt utrymme.
#news {order:2;display:flex;flex-flow:row wrap;}Utmaningen vi har nu är att när nyheterna inte är jämnt fördelade ligger det största objektet (G) längst ner. På de flesta webbplatser vill vi ge den största mängden utrymme till det högsta innehållet. Vi kan fixa det här genom att sätta omslaget ihop.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Det ordnar objekten, men läser från vänster till vänster, de är nu i ordning. Så vi måste vända ordern genom att ställa in riktningen mot rad-bakåt.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Det placerar objekten i följd ordning, läsning från vänster till höger, topp till botten; med de större föremålen alltid överst. Men jag vill inte ändra ordningens berättelser i min markering för att tvinga punkt A att komma före punkt B. Så det sista jag behöver göra är att ändra ordning på artiklarna.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Det sista elementet som ska formas är sidfoten. Vi vill lägga ut det, ungefär som rubriken, men eftersom fotfoten bara har tre barnselement (jämfört med rubrikens fyra) kommer vi att ställa in stycket som är dubbelt så stort som logotypen och listan .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Det fungerar bra på skrivbordsstorlekar, men krympa din webbläsare och du ser att den är för trång på små enheter. Så låt oss ändra koden så att den läggs ut som kolumner under 600px och återgår till en rad över 600px.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}Och där har du det. Ett modernt tillvägagångssätt för att lägga ut innehåll på en webbsida, som är brett stöd och lätt att implementera.
Flexboxens kraft är att dess egenskaper kan kombineras för att ge oss exakt kontroll över våra layouter, med den enklaste möjliga syntaxen.