Lad mig sige det første: Flexbox er nemt. Uanset om det er på grund af tidlige vedtagelsesproblemer, eller fordi vi har lært at tænke på flyter og blokke, hører jeg ofte fra webdesignere, at de mener, at Flexbox er kompleks at implementere. Men jeg gentager: Flexbox er let.

Der er et trick til at forstå flexbox, som jeg vil lære dig, hvorefter alt vil være klart. Men først vil jeg tale om, hvad flexbox er.

Hvad er flexbox?

Flexbox (eller Fleksibel boks layout modul for at give det det rigtige navn) er et sæt CSS-egenskaber, der kombinerer layout af indhold på en lydhør måde.

Flexbox er den første CSS layout teknik, der virker for det moderne web. Det er rimeligt at sige, at indtil flexbox blev understøttet, var der ingen layout teknik, der fungerede godt med lydhurt webdesign.

Masser af hacks har floppet rundt, ligesom indstillingselementer, der skal vises: inline-block og giver dem mulighed for at pakke. Men dette frembragte en række problemer for fleksible steder, ikke mindst manglen på kontrol og påvirkningen af ​​elementer, der ændrede størrelsen. Af denne grund bruger mange lydhøre websites stadig JavaScript til at placere indhold.

Hvad er flexbox til?

Flexbox er beskrevet af W3C som beregnet til at lægge UI-elementer ud - ting som menupunkter - det er ikke beregnet til at lægge hele sider ud.

Grunden til, at det ikke er beregnet til layout ud hele sider, er, at flexbox har et companion CSS modul, den Gitterlayoutmodul som er beregnet til layout. Gitterlayout anses for at være den mest hensigtsmæssige teknik til komplet side layout. Desværre er der meget begrænset support til net på nuværende tidspunkt, og ved 'begrænset' mener jeg 'ingen'. Selv den seneste version af Chrome undlader at understøtte den uden flag.

Heldigvis er browsersupport til flexbox meget mere omfattende. Og fordi det løser så mange moderne layoutproblemer, er flexbox et ideelt værktøj, indtil nettet er endelig vedtaget.

Styling komponenter

Flexbox er ideel til styling af komponenter på en side. Flexboxens virkelige kraft, og årsagen til, at det fungerer så meget bedre end andre layoutindstillinger, kommer fra at erklære stilarter på grupper af genstande i stedet for individuelle elementer.

Når det kommer til layout, er vi sjældent nødt til at placere en enkelt vare - hvis vi planlægger at gøre det, er det meget bedre at bruge positionering. Flexbox fungerer bedst, når det styrer, hvordan grupper af elementer vedrører hinanden.

Altid design noget ved at overveje det i sin næste større sammenhæng - en stol i et værelse, et værelse i et hus, et hus i et miljø, et miljø i en byplan. - Eliel Saarinen

Som sådan er flexbox-specifikationen opdelt i to dele, et sæt egenskaber, der refererer til beholderelementet, og et sæt egenskaber, der henviser til elementerne indenfor.

Browser support

Browserstøtte er typisk et komplekst spørgsmål. Gjorde det mere komplekse for flexbox, fordi flexbox har flere forskellige syntakser. Tidlig ubeslutsomhed, uafhængig udvikling af nogle browser leverandører og en iterativ proces har efterladt os flere forskellige versioner af flexbox, som alle skal have taget hensyn til.

Heldigvis, med tilføjelse af nogle browser præfikser til gamle browsere, kan vi nu stole på det. Ifølge caniuse.com , af nuværende almindelige browsere kun IE9 vil frembyde et problem for os.

Heldigvis lyder det som om alt CSS, hvis flexbox fejler, det ikke lykkes. Det betyder, at IE9 bare vil ignorere det.

Flexbox versioner

Takket være en svimlende mangel på samarbejde mellem forskellige udvalgsgrupper og virksomheder har flexboxs implementering næsten rivaliseret kaoset fra de tidlige '00'ere, når hver enkelt browser implementerede hver enkelt ejendom unikt og ukorrekt på samme tid. Flexbox's tre implementeringer var helt enkelt en iterativ tilgang, der har resulteret i den mest nyttige fælles løsning.

Der er tre versioner af flexbox syntaksen, som du skal være opmærksom på: gamle, mellemliggende og nye. Forskellige browsere understøtter forskellige syntaxer, IE10 understøtter f.eks. Den mellemliggende syntaks.

Ligesom browser-præfikser skriver vi Flexbox-syntaks fra ældste til nyeste, så den nyeste understøttede syntax tilsidesætter de ældre syntaxer.

For eksempel skriver vi display: flex som sådan:

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

Af hensyn til klarheden vil jeg ikke dykke ind i de ældre syntakser, eller debattere fordelene ved forprocessorer, postprocessorer og forskellige konverteringsskripter. I alle mine eksempler skal jeg bruge den korrekte, nye syntaks.

Når det kommer til produktionskode, bruger jeg en serie Sass mixins til at udvide flexbox support til ældre browsere.

Der er en fremragende Sass mixin her , som du enten kan bruge til at forhindre, at din kode oppustes eller uddrage den arvige syntaks.

Hemmeligheden til at forstå flexbox

Hemmeligheden bag flexbox er, at det slet ikke er en boks. Hidtil har alt layout på internettet brugt et kartesisk system med x og y til at plotte punkter. Flexbox er derimod en vektor.

Det lyder godt, ikke? Flexbox er en vektor, hvilket betyder at vi definerer en længde, og vi definerer en vinkel. Vi kan ændre vinklen uden at påvirke længden; og vi kan ændre længden uden at påvirke vinklen.

Denne nye tilgang betyder, at nogle af flexboxens terminologi er indledningsvis komplekse. Når vi f.eks. Justerer elementer til toppen af ​​en flexbeholder, bruger vi flex-start, ikke øverst, fordi hvis vi ændrer orienteringen, vil flex-start stadig gælde, men toppen vil ikke.

Når du har forstået denne fremgangsmåde, bliver mange af flexboxen demystificeret.

Sådan bruges flexboxbeholdere

Flexboxs syntaks er opdelt i to grupper: de egenskaber, der styrer containeren, og de egenskaber der styrer containers direkte efterkommere. Den førstnævnte er den mest nyttige, så lad os starte der.

Kom i gang

Lad os sige, at vi ønsker at udstyre varer inden for en blok. Vi vil have dem fordelt jævnt. Brug af flexbox er meget nemt at gøre. Den første ting, vi har brug for, er en vis markering for at prøve det ud på:

Flexbox Layout

Det er en simpel HTML-side , med en hus div, der indeholder fem rum divs, som hver har en klasse, der identificerer deres funktion, køkken, vaskerum, stue og soveværelse.

Hvad vi skal gøre er at sætte huset til en flexboxbeholder. Eventuelle flexbox egenskaber vi sætter på huset vil så blive anvendt til sine børn ( værelset s).

Oprettelse af en fleksibel boks

For at udforme rummet s skal vi først erklære huset som en flexboxbeholder, og så fortælle det, hvordan vi vil have barnets elementer arrangeret.

At erklære hus som en flexboxbeholder bruger vi følgende kode:

.house {background:#FF5651;display:flex;}

Og det er det. Vi har oprettet en fleksibel boks. Alt, hvad vi skal gøre nu, er at fortælle flexbox, hvordan man opretter rummet s. Vi kan gøre det ved hjælp af egenskaben retfærdiggør indhold .

retfærdiggør indholdet har fem mulige værdier: center, flex-start, flex-end, space-around og mellemrum mellem. Disse centrerer emnerne, indstiller dem til starten (som er enten øverst eller venstre, som vi diskuterer nedenfor), slutningen (som er enten bunden eller den højre), rummer dem med ens plads omkring hver enkelt genstand eller med lige mellemrum mellem hver vare.

Vi bruger plads-rundt:

.house {background:#FF5651;display:flex;justify-content: space-around;}

Her er en demo . Bemærk hvordan der er dobbelt mellemrummet mellem emnerne som der er på de to yderkanter? Det skyldes, at hver genstand har samme plads til venstre og til højre. Hvis vi havde brugt plads mellem imellem ville der ikke være plads på kanterne.

Jeg er ikke sikker på dig, men vaskerummet i mit hus er lidt mindre end loungen, og selvom jeg har et lille køkken, vil jeg elske en meget større en. Så lad os lave nogle tilføjelser til vores kode for at afspejle det:

.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}

Som du kan se i dette eksempel , vores værelser er stadig jævnt fordelt. Selv om vi har ændret størrelsen. Flexbox er strålende til at organisere indhold.

Ændring af vinklen

Som vi diskuterede ovenfor, er en af ​​grundene til, at flexbox fungerer så godt for designere, at den er beskrevet som en vektor. På nuværende tidspunkt understøtter flexbox kun fire vinkler: 0, 90, 180 og 270 grader. Så det er meget enklere at tænke på dem som en akse.

For at ændre aksen bruger vi flex-retningsegenskaben , som har fire mulige værdier: række (standard - som du kan se i eksemplerne ovenfor er vores værelser lagt ud fra venstre til højre), række omvendt, kolonne og kolonne-revers.

Hvis vi ændrer flex-retningen til kolonnen, vil du se i denne demo at værelserne nu er placeret lodret, top til bund:

.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}

Som jeg er sikker på, kan du gætte, række omvendt og kolonne-omvendt omvendt rækkefølgen af ​​emnerne i din flexbeholder.

Flex vs. Flex-inline

I det sidste eksempel bemærker du, at mens huset strækker sig hele vejen over visningsporten, strækker den sig i fuld højde, selv når den er indstillet til flex-retning: kolonne.

For at kunne lege fint med CSS 'kartesianbaserede koordinatsystem behandles flexboxbeholderen som et blokniveauelement.

Ligesom displayet: Blokken har en ledsagedisplay : inline-blok, så at vise: flex har display: inline-flex.

inline-flex er i øjeblikket mest nyttigt, hvis du slipper flexboxelementer i et eksisterende layout, og du har brug for det til at fungere fint med flyder og positionerede elementer.

Justering af tværgående akse

Som vi har set, har Flexbox ikke noget imod, om det ligger horisontalt eller vertikalt, hvilken retning du vælger, anses for at være flexboxens primære akse.

Men flexbox tillader os også at styre positionen langs den modsatte, sekundære akse.

Position på den sekundære akse styres af justeringselementegenskaben ; den har fem mulige værdier: baseline, center, flex-end, flex-start og stretch.

Baseline vil normalt være den mest nyttige mulighed. Det sikrer, at tekstlinjens basislinier op. For at teste dette skal vi lave nogle ændringer til vores HTML-fil:

Flexbox Layout
Kitchen
Washroom
Lounge
Bedroom
Bedroom

Du kan se, at jeg har tilføjet noget tekst og importeret, og derefter anvendt en Google-skrifttype. Jeg har også ændret skrifttypestørrelsen i køkkenet og vaskerummet, så der er en klar skelnen.

Når vi indstiller egenskaben til justeringselementer til basislinjen , vil du se i denne demo at tekstens basislinje passer op.

.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}

justeringspunkter: center center aligns, enten vertikalt (hvis bøjningsretning: række eller bøjningsretning: række omvendt ) eller vandret (hvis bøjningsretning: kolonne eller bøjningsretning: kolonne-omvendt ). Her er en demo.

justeringselementer: flex-start justeres til toppen og justeringselementer: flex-end justeres til bunden (hvis flex-retning: række eller bøjningsretning: række omvendt ) eller til venstre og højre (hvis flex-retning: kolonne eller flex-retning: kolonne-omvendt ). Her er en demo.

stræk, er en anden meget nyttig mulighed. stræk vil ændre størrelsen på emnerne, så hver enkelt er i samme højde (de vil vokse, ikke krympe). Her er en demo.

I vores andre eksempler har vi eksplicit angivet højden af ​​elementerne, hvilket er nok til at tilsidesætte flexbox, så du kan se justeringselementer: strække arbejde korrekt, du skal fjerne højden fra alle klasserne undtagen en.

Indpakning på flere linjer

Indtil videre har vi brugt flexbox til layoutelementer, så de ændres på tværs af rummet, men hvad sker der, når indholdet af emnerne er for stort til at passe på en linje?

For at demo dette, vil jeg øge størrelsen på mine værelser:

Flexbox Layout
Kitchen
Washroom
Lounge
Bedroom
Bedroom

Her er hvordan det ser ud nu

Hvis du krymper dit browservindue, ser du, at indholdet bliver afskåret, da der ikke er plads til det. Heldigvis definerer flexbox en flex-wrap egenskab for netop denne eventualitet, som har tre mulige værdier: no-wrap (standard), wrap og wrap-reverse.

wrap forårsager eventuelle genstande, der vil strække sig ud over beholderen til at pakke ind på en efterfølgende linje, ligesom en tekstrække.

.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}

Hvis du squish ned din browser vil du se i denne demo Indpakningerne pakker nu på nye linjer. Bemærk hvordan justeringselementer: grundlinjeegenskab stadig anvendes? Flexboxs virkelige kraft er i at kombinere sine egenskaber.

Et vigtigt begreb, som jeg senere vil dække, er, at bøjle-omslag: wrap-reverse vender ikke rækkefølgen af ​​emnerne, det forårsager, at varer, der vil strække sig ud over beholderen, omdannes til en tidligere linje, som set i denne demo .

Brug af flexboxens stenegenskaber

Som mange CSS-egenskaber har nogle flexbox-egenskaber shorthand-versioner, der implementeres mere konsekvent af browserproducenter.

Flex-flow egenskaben er stenografi for flex-retningen og bøjnings-wrap egenskaber. Så i stedet for at skrive:

flex-direction:row-reverse;flex-wrap:wrap;

Vi kan bruge stenografi:

flex-flow:row-reverse wrap;

Justering af tværgående akse (del 2)

Ovenfor brugt vi justeringselementegenskaberne til at justere elementer til basislinjen, positionen og strækelementerne. Som du kan se i det sidste eksempel, er det stadig forekommende, men det sker på linje for linje.

Når vores varer er pakket ind, har vi mulighed for at indstille, hvordan de vil blive lagt ud på sekundæraksen, hvis beholderen er større end nødvendigt.

Hvis vi sætter min højde på vores hus til 1200px, vores layout ser sådan ud .

.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}

Vi kan nu bruge justeringsindholdsegenskaben til at udforme genstandene over hele sekundæraksen.

Justeringsindholdsegenskaben har seks indstillinger: center, flex-end, flex-start, mellemrum, mellemrum og strækning. Disse værdier leverer de samme resultater som andre steder: centrering, tilpasning til den ene ende, ensartet afstand eller strækning.

Her er en demo med ejendommen sat til rum-rundt.

Sådan bruger du flexbox-emner

Indtil nu har alle de ejendomme, vi har set på, sat ind på containerelementet. For at finjustere emner giver flexbox os også en række egenskaber, der kan indstilles på individuelle emner.

For at afklare dette, lad os fjerne nogle af vores kode:

Flexbox Layout
Kitchen
Washroom
Lounge
Master Bedroom
Bedroom

Her er hvordan det ser ud

Kontrol af individuelle elementer

Den første flexbox-genstand er den forvirrende navngivne flexegenskab. flex er en værdi af displayegenskaben på beholderen, men det er også en egenskab i egen regning.

Flex- ejendommen er stenografi for flex-grow, flex-shrink og flex-basis egenskaber. Disse ejendoms rolle er at strække eller squash indholdets størrelse, så det fylder rummet helt.

Flex-grow- ejendommen fortæller de elementer, de kan forstørre, hvis det er nødvendigt, så emnerne fylder bredden (for bøjningsretning: række ) og højden (for bøjningsretning: kolonne ) fuldt ud.

Flex-grow- ejendommen tager et forhold. Så hvis vi sætter flex-grow- ejendommen til 1, vil alle vores varer være af samme størrelse som du kan se her .

.room {background:#00AAF2;height:90px;flex-grow:1;}

Ud over at have lige stor størrelse, kan vi også indstille forskellige forhold. Jeg vil stadig have mit køkken til at være større end min vaskerum, så lad os ordne det i denne demo .

.kitchen {height:300px;flex-grow:2;}

flex-shrink virker nøjagtig det samme som flex-grow, bortset fra at det krymper varen, hvis det kræves, i stedet for at udvide det.

Hvis du ændrer størrelsen på browseren, vil du se at i forskellige størrelser er mit køkken ikke lige så stort som det andet rums bredde. Det skyldes flex- basisegenskaben.

flex-basis bestemmer, hvordan flex-grow og flex-shrink egenskaber beregnes. Den har 2 værdier: auto (standard) og 0.

Hvis den er sat til 0, tages hele varen i betragtning. Hvis den er indstillet til auto , er den polstring omkring elementets indhold, der er ændret. Med andre ord ignorerer 0 størrelsen af ​​elementets indhold ved beregning, og auto tager højde for det. Der er en praktisk diagram leveret af W3C, der forklarer dette.

Her er en demo af hvad der sker, når jeg sætter flex-basis: 0 på ovenstående eksempel.

flex-basis: 0 er særligt nyttigt, hvis du vil rumme emner jævnt, uanset indholdet.

Som nævnt ovenfor er flexegenskaben en stenografi for disse egenskaber, og du finder det den mest pålidelige måde at indstille disse værdier på.

Ordren af ​​værdier er flex-grow, flex-shrink, flex-basis. Så for at indstille en vækstværdi på 2, en krympeværdi på 1 og et grundlag på 0, vil du bruge:

.room {background:#00AAF2;height:90px;flex: 2 1 0;}

Kontrol af ordre med flexbox

En af de bedste funktioner i flexbox er dens evne til at ændre rækkefølgen af ​​varer uden at påvirke markeringen; Dette er især nyttigt for tilgængelighed, da det giver os mulighed for at kode opmærkning på passende vis og derefter vise det optimalt.

For at gøre dette bruger vi varens ordreegenskab.

Kig på vores eksempel er vaskerummet lige ved siden af ​​køkkenet. Jeg ville hellere det var ved siden af ​​soveværelserne, så jeg kan hoppe lige ind i bruseren om morgenen, så lad os flytte den. Det er i øjeblikket det 2. punkt, vi vil have det til at være det tredje. Så vi sætter sin ordre ejendom i overensstemmelse hermed i denne demo .

.washroom {height:60px;order:2;}

Se hvordan det hoppede helt til slutningen af ​​rækken? Det er ved siden af ​​soveværelserne, men ikke hvordan vi havde til hensigt. Dette er en stor gotcha i flexbox, fordi mange udviklere (selv inkluderet) oprindeligt forventer, at ordren fungerer som en matrix.

ordre fungerer faktisk som CSS ' z-indeks, hvilket betyder, at hvis du ikke eksplicit angiver en ordre for en vare, antages det at være lavere i ordren end en vare, for hvilken en værdi er udtrykkeligt angivet.

Vi vil have vaskerummet at bytte med loungen, så i denne demo de eneste andre ting, der har brug for en ordre er soveværelset s.

.washroom {height:60px;order:2;}.bedroom {order:3;}

Bemærk hvordan begge soveværelse s deler samme ordrenummer? I tilfælde som disse vil browseren falde tilbage på DOM-ordren.

Breaking alignment

Den endelige genstand er ensartet. Det bruges til at ændre elementets justering på den sekundære akse. justeringselementer bruges til at justere alle elementerne, og denne egenskab giver dig mulighed for at fravælge denne tæppeindstilling.

Det tager de samme fem værdier som den tilsvarende egenskab på beholderen: basislinie, center, flex-end, flex-start og stretch.

Her er en demo af vaskerummet re-aligned.

.washroom {height:60px;order:2;align-self:flex-end;}

Moderne weblayout med flexbox

Flexbox er en kraftfuld mulighed for at lægge indhold ud. Selvom det ikke er beregnet til at lægge hele sider ud, giver den overlegne understøttelse af Grid Layout det en fantastisk mulighed, især for mobile første websites.

At demonstrere, vi skal sammensætte en enkel side, der bruger nogle af de ovenfor beskrevne teknikker.

Kom i gang

For det første er vores markering, og nogle grundlæggende stilarter til siden.

Flexbox Demo
  • A
  • B
  • C
  • D
  • E
  • F
  • G

Som du kan se Jeg har en div med id- siden. Indvendige side Jeg har en uordnet liste over nyhedsartikler. Efter nyhedsartiklerne har jeg overskriften, som er under nyhedsindholdet til gavn for tilgængeligheden. Endelig har jeg en footer.

Ændring af indholdsordren

Det første jeg vil gøre er at flytte overskriften op til toppen af ​​siden. For at gøre det, sætter vi side for at være en flexboxbeholder. Så sætter vi retningen til kolonne. Derefter tildele en ordre til hver af sidens barnelementer.

#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}

Sådan ser det ud.

Nestende flexbox containere

Det næste skridt er at lægge hovedet ud. Børneelementer i flexboxbeholdere kan være flexboxbeholdere i deres egen ret, så vi kan bruge flexbox til jævnt at placere hovedelementerne.

Lad os sætte overskriften som en flexboxbeholder, så lad os rumme indholdet jævnt uden ekstra polstring på siderne, og endelig lad os sørge for at menupunkterne er på samme basislinje som logoet.

#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}

Sådan ser det ud.

Kompleks indholdsindpakning

Vores nyhedsartikler vil være pladsindehavere for fremhævede historier, så de skal være en betydelig størrelse for at give plads til tekst og et billede eller en video. Så vi har brug for dem til at pakke ind.

Lad os sætte nyhedsdelene som en flexboxbeholder. Lad os nu give nyhederne nogle mindste dimensioner og nogle farver, så vi kan se dem tydeligt.

#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}

Sådan ser det ud.

Nu skal vi sætte nyhedsbeholderen i wrap, og newsItem s skal udvides for at udfylde det ledige rum.

#news {order:2;display:flex;flex-flow:row wrap;}

Sådan ser det ud.

Den udfordring vi har nu er, at når newsItem s ikke er jævnt fordelt, er den største genstand (G) i bunden. På de fleste steder vil vi give den største mængde plads til det øverste indhold. Vi kan løse dette ved at indstille pakken til at pakke om.

#news {order:2;display:flex;flex-flow:row wrap-reverse;}

Sådan ser det ud.

Det genbestiller varerne, men læsning fra øverst til venstre, de er nu ude af drift. Så vi er nødt til at vende ordren, ved at sætte retningen til bagsiden.

#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}

Sådan ser det ud.

Det placerer emnerne i rækkefølge, læsning fra venstre til højre, top til bund; med de større genstande altid øverst. Men jeg ønsker ikke at ændre rækkefølgen af ​​historier i min markering for at tvinge punkt A til at komme før punkt B. Så det sidste jeg skal gøre er at ændre rækkefølgen af ​​emnerne.

.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;}

Sådan ser det ud.

Blanding af flexbox og medieforespørgsler

Det sidste element, der skal styles, er foden. Vi ønsker at lægge det ud, ligesom hovedet, men fordi fodfodsen kun har tre barnelementer (i forhold til hovedets fire), skal vi sætte stykket til at være dobbelt så bredt som logoet, og listen .

#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}

Sådan ser det ud.

Det virker fint på skrivebordsstørrelser, men reducer din browser nede, og du vil se, at den er for trang på små enheder. Så lad os ændre koden, så den er lagt ud som kolonner under 600px, og vender tilbage til en række over 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;}}

Sådan ser det ud.

Konklusion

Og der har du det. En moderne tilgang til at lægge indhold på en webside, der er bredt understøttet og nem at implementere.

Flexboxens kraft er, at dens egenskaber kan kombineres for at give os præcis kontrol over vores layout, med den enkleste syntax.

Udvalgte billede, fleksibelt billede via Shutterstock.