Leyfðu mér að segja þetta fyrst: Flexbox er auðvelt. Hvort sem það er vegna málefna snemma eða vegna þess að við höfum lært að hugsa hvað varðar flög og blokkir, heyri ég oft frá vefhönnuðum sem þeir telja að Flexbox sé flókið að framkvæma. En ég endurtaka: flexbox er auðvelt.
Það er eitt bragð til að skilja flexbox sem ég mun kenna þér, eftir það mun allt vera skýrt. En fyrst vil ég tala um hvað flexbox er.
Flexbox (eða Sveigjanlegur kassi uppbyggingareining til að gefa það rétt nafn þess) er sett af CSS eiginleikum sem sameina til að leggja fram efni á móttækilegan hátt.
Flexbox er fyrsta CSS skipulag tækni sem virkar fyrir nútíma vefur. Það er sanngjarnt að segja að þar til flexbox var studd var engin skipulag tækni sem virkaði vel með móttækilegri vefhönnun.
Fullt af hacks hafa verið fljótandi í kring, eins og að setja þætti til að sýna: inline-blokk og leyfa þeim að hula. En þetta gaf til kynna fjölda vandamála fyrir sveigjanlegar síður, ekki síst skort á stjórn og höggvirkni þætti breytinga. Af þessum sökum notar margar móttækilegar vefsíður ennþá JavaScript til að staðsetja efni.
Flexbox er lýst af W3C sem ætlað er að setja út UI-þætti-hluti eins og matseðill atriði-það er ekki ætlað að leggja fram alla síður.
Ástæðan fyrir því að það er ekki ætlað að skipuleggja út alla síður, er að flexbox sé meðfylgjandi CSS mát, the Grid Layout Module sem er ætlað fyrir skipulag. Grid Layout er talinn vera hentugur tækni fyrir fullan skipulag síðu. Því miður er mjög takmörkuð stuðningur við rist í nútímanum og með "takmörkuðum" merkir ég 'enginn'. Jafnvel nýjasta útgáfan af Chrome styður ekki það án þess að fá fánar.
Til hamingju með vafra stuðning fyrir flexbox er miklu meira alhliða. Og vegna þess að það leysir svo mörg nútíma skipulag vandamál, flexbox er kjörinn tól þar til rist er loksins samþykkt.
Flexbox er tilvalið til að stilla hluti á síðu. Hinn raunverulegi kraftur flexbox og ástæðan fyrir því að það virkar svo mikið betur en aðrar skipulagsmöguleikar, kemur frá því að lýsa yfir stílum á hópum af hlutum í stað einstakra atriða.
Þegar það kemur að skipulagi þurfum við sjaldan að setja eitt atriði - ef við ætlum að gera það, þá er það miklu betra að nota staðsetningu. Flexbox virkar best þegar það stýrir hvernig hópar þættanna tengjast hver öðrum.
Alltaf hönnun hlutur með því að íhuga það í næsta stærri samhengi - stól í herbergi, herbergi í húsi, hús í umhverfi, umhverfi í borgarskipulagi. - Eliel Saarinen
Sem slíkur er flexbox forskriftin skipt í tvo hluta, eitt sett af eiginleikum sem vísa til ílátið og eitt sett af eiginleikum sem vísa til þætti innan.
Stuðningur við vafra er yfirleitt flókin spurning. Gerði allt flóknari fyrir flexbox því flexbox hefur nokkrar mismunandi setningafræði. Snemma indecision, sjálfstæð þróun hjá sumum vafra birgja, og endurtekningu ferli, hefur skilið okkur með nokkrum mismunandi útgáfum af flexbox sem allir þurfa að vera veitingamaður.
Til hamingju með að bæta við nokkrum vafraforskeyti fyrir vafra með arfleifð, getum við nú treyst á það. Samkvæmt caniuse.com , af núverandi almennum vafra aðeins IE9 mun kynna vandamál fyrir okkur.
Sem betur fer, eins og allir CSS, ef flexbox mistekst, tekst það ekki hljótt. Það þýðir að IE9 mun bara hunsa það.
Þökk sé yfirþyrmandi skorti á samvinnu milli ýmissa útibúa nefnda og fyrirtækja hefur framkvæmdir Flexbox næstum keppt við óreiðu snemma 00s þegar allir vafrar útfærðu hvert einasta eign einstaklega og rangt á sama tíma. Að veita öllum þeim ávinningi sem vafi leikur á, þrjár gerðir flexboxar voru einfaldlega endurteknar aðferðir sem hafa leitt til hjálpsamrar algengrar lausnar.
Það eru þrjár útgáfur af setningabreytingunni sem þú þarft að vera meðvitaður um: gamalt, milli og nýtt. Mismunandi vöfrum styður mismunandi setningafræði, IE10 styður td samhliða setningafræði.
Rétt eins og fyrirframforrit fyrir vafra, skrifum við Flexbox setningafræði frá elstu til nýjustu, þannig að nýjasta yfirlitsgreiningin fjallar um eldri setningafræði.
Til dæmis skrifum við skjá: beygðu eins og svo:
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*/Til að sýna skýrleika, mun ég ekki kafa inn í eldri setningafræðin, eða ræða um verðmæti fyrirframvinnsluforrita, eftirvinnsluforrita og mismunandi viðskiptaskipta. Í öllum dæmunum mínum ætla ég að nota rétt, nýtt setningafræði.
Þegar kemur að framleiðslu kóðans nota ég Sass mixins röð til að lengja flexbox stuðning við eldri vafra.
Það er frábært Sass mixin hér , sem þú getur annaðhvort notað til að koma í veg fyrir að kóða uppblásnar eða útdrætti erfðaorðabókina.
Leyndarmál flexbox er að það er ekki kassi yfirleitt. Hingað til hefur öll skipulag á vefnum notað Kartesian kerfi x og y, til að lenda stig. Flexbox, hins vegar, er vigur.
Hljómar vel, ekki satt? Flexbox er vektor, sem þýðir að við skilgreinum lengd og við skilgreinum horn. Við getum breytt horninu án þess að hafa áhrif á lengdina; og við getum breytt lengdinni, án þess að hafa áhrif á hornið.
Þessi nýja nálgun þýðir að sumt af hugtökum flexbox er upphaflega flókið. Til dæmis, þegar við samræmum hlutum efst í beygjaíláti, notum við beygja-byrjun, ekki toppur - vegna þess að ef við breytum stefnuna mun sveigjanleiki enn gilda, en toppurinn mun ekki.
Þegar þú hefur skilið þessa nálgun er mikið af flexbox demystified.
Orðalisti Flexbox er skipt í tvo hópa: þær eiginleikar sem stjórna ílátinu og þeim eiginleikum sem stjórna beinum afkomendum ílátsins. Fyrrverandi er gagnlegur, svo skulum byrja þar.
Segjum að við viljum geyma út atriði innan blokkar. Við viljum að þau séu á bilinu jafnt. Notkun flexbox er mjög auðvelt að gera. Það fyrsta sem við þurfum er einhver merking til að prófa þetta á:
Flexbox Layout Það er einfaldur HTML síðu , með húsdeild, sem inniheldur fimm herbergi divs sem hver hefur bekk sem skilgreinir hlutverk þeirra, eldhús, salerni, setustofa og svefnherbergi.
Það sem við ætlum að gera er að setja húsið sem flexbox ílát. Allar sveigjanleiginleikar sem við setjum á hús verður síðan beitt á börnin sín ( herbergi s).
Til þess að skipuleggja herbergið s þurfum við fyrst að lýsa húsinu sem flexbox ílát, og þá segja það hvernig við viljum að barnið þættir raðað.
Til að lýsa húsi sem flexbox gámur notum við eftirfarandi kóða:
.house {background:#FF5651;display:flex;}Og þannig er það. Við höfum búið til sveigjanlegt reit. Allt sem við þurfum að gera núna er að segja flexbox hvernig á að skipuleggja herbergið s. Við getum gert það með því að nota eignarréttarréttindi.
réttlætið innihald hefur fimm mögulegar gildi: miðju, beygja-byrjun, beygja-endir, rúm-kringum og bil milli. Þessar miðju atriði, taktu þau í byrjun (sem er annaðhvort efst eða vinstri, eins og við munum ræða hér að neðan), enda (sem er annað hvort botninn eða hægri), rýmið þeim með jafnt rými um hvert atriði, eða með jöfn rými milli hvers hlutar, í sömu röð.
Við munum nota pláss í kringum:
.house {background:#FF5651;display:flex;justify-content: space-around;}Hér er kynning . Takið eftir því hvernig tvöfalt er bilið á milli atriðanna eins og það er á báðum ytri brúnum? Það er vegna þess að hvert atriði hefur sama rými til vinstri og til hægri. Ef við höfðum notað pláss á milli staða væri ekkert pláss á brúnum.
Ég er ekki viss um þig, en salerni í húsinu minni er svolítið minni en stofan, og þótt ég sé með lítið eldhús, myndi ég elska mun stærri. Svo skulum gera nokkrar viðbætur við kóða okkar til að endurspegla það:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Eins og þú getur séð í þetta dæmi , herbergin okkar eru enn jafnt á milli. Jafnvel þótt við höfum breytt stærðinni. Flexbox er ljómandi að skipuleggja efni.
Eins og við ræddum hér að framan er ein af ástæðunum fyrir því að flexbox virkar svo vel fyrir hönnuði að það er lýst sem vektor. Á þessari stundu styður flexbox einungis fjögur horn: 0, 90, 180 og 270 gráður. Svo er það miklu einfaldara að hugsa um þá sem ás.
Til að breyta ásnum notum við sveigjanleika eignarinnar, sem hefur fjóra mögulega gildi: röð (sjálfgefin - eins og sjá má í dæmunum hér að framan eru herbergin okkar sett fram til vinstri til hægri), línuræfingar, dálkur og dálkur-afturábak.
Ef við breytum sveigjanlegri átt að dálki, muntu sjá í þessari kynningu að herbergin eru nú sett upp lóðrétt, frá toppi til botns:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Eins og ég er viss um að þú getur giska á, snúa til baka og dálka-öfugt snúið við röð hlutanna í beygjaílátinu þínu.
Þú munt taka eftir í síðasta fordæmi að þótt húsið breiðist alla leið yfir sjónarhornið, stækkar það í fulla hæð, jafnvel þegar stillt er á sveigjanleika: dálki.
Til þess að geta spilað vel með CSS 'kartesískum hnitakerfi er flexbox ílátið meðhöndlað sem blokkarþáttur.
Rétt eins og sýning: Loki hefur samhljóða skjá: Inline-blokk, þannig að sýna: Flex hefur skjá: Inline-Flex.
inline-flex er nú gagnlegur ef þú sleppir flexbox þætti í núverandi skipulag og þú þarft það til að leika vel með flotum og stöðum.
Eins og við höfum séð, hugsar flexbox ekki hvort það setur út lárétt eða lóðrétt, hvort sem stefna sem þú velur er talin vera aðalás á flexbox.
En flexbox leyfir okkur einnig að stjórna stöðu meðfram gagnstæða, efri ásnum.
Staða á efri ásnum er stjórnað af jöfnum hlutum eignarinnar; Það hefur fimm mögulegar gildi: upphaf, miðju, beygja-endir, beygja-byrjun og teygja.
grunnlínu mun venjulega vera gagnlegur valkostur. Það tryggir að grunnlínur textans líði upp. Til að prófa þetta þurfum við að gera nokkrar breytingar á HTML skjalinu okkar:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomÞú munt sjá að ég hef bætt við texta og flutt inn og síðan notað Google letur. Ég hef einnig breytt leturstærðinni í eldhúsinu og klósettinu þannig að það er skýr greinarmunur.
Þegar við stillum eignarréttirnar í upphafsgildi sem þú munt sjá í þessari kynningu að grunnsnið textans jafngildir.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}jöfnuðir: miðjubúnaður, annaðhvort lóðrétt (ef beygja stefnu: röð, eða beygja-átt: snúa aftur ) eða lárétt (ef beygja átt: dálkur eða beygja stefnu: dálkur-afturábak ). Hér er kynning.
breytilegir hlutir: beygja-byrjun jafngildir efst og samstillingar: beygja-endir samræma við botninn (ef beygja átt: röð, eða beygja-átt: snúa aftur ), eða til vinstri og hægri (ef beygja stefnu: dálkur, eða beygja-átt: dálkur-afturábak ). Hér er kynning.
teygja, er annar mjög gagnlegur valkostur. teygja mun breyta stærð hlutanna, þannig að hver og einn sé í sömu hæð (þeir munu vaxa, ekki skreppa saman). Hér er kynning.
Í öðrum dæmum okkar höfum við sérstaklega sett hæðina á þeim atriðum sem nóg er til að hunsa flexbox, þannig að sjá jafna-atriði: teygja virka rétt, þú þarft að fjarlægja hæðina frá öllum flokkum nema einum.
Hingað til höfum við notað flexbox til að skipuleggja þætti svo að þær breytist yfir rúmið, en hvað gerist þegar innihald hlutanna er of stór til að passa á eina línu?
Til að kynna þetta mun ég auka stærð herbergjanna minna:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomHér er hvernig það lítur út núna.
Ef þú skreppar niður vafrann þinn muntu sjá að efnið verður skemmt, þar sem ekki er pláss fyrir það. Til hamingju með flexbox skilgreinir sveigjanlegan eign fyrir þetta tækifæri, sem hefur þrjá mögulega gildi: ekki-hula (sjálfgefið), vefja og hula-afturábak.
vefja veldur einhverjum hlutum sem myndi ná lengra en ílátinu til að vefja á næstu línu, líkt og lína af textahylki.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Ef þú smellir niður vafrann þinn muntu sjá í þessari kynningu Núna er slegið inn á nýjar línur. Takið eftir því hvernig samræmingarþátturinn: grundvallar eign er ennþá beitt? Realbox Powerbox er að sameina eiginleika þess.
Eitt mikilvægt hugtak, sem ég mun ná til síðar, er að beygja-hula: vefja-aftur er ekki snúið við röð hlutanna, það veldur einhverjum hlutum sem myndi ná utan um ílátið til að vefja á fyrri línu, eins og sést í þessari kynningu .
Eins og margir CSS eiginleikar hafa sumir flexbox eiginleikar útgáfur af stuttmynd sem eru framkvæmdar með stöðugri hætti af vafraframleiðendum.
Sveigjanleiki eignarinnar er styttri fyrir sveigjanleika og sveigjanleika . Svo í stað þess að skrifa:
flex-direction:row-reverse;flex-wrap:wrap;Við getum notað shorthandið:
flex-flow:row-reverse wrap;Ofangreind notum við eigna jöfnunarefna til að samræma atriði í grunn-, staðsetningar- og teygjaþætti. Eins og þú sérð í síðasta dæminu er það enn sem komið er, en það gerist á línu fyrir línu.
Þegar hlutir okkar hafa verið pakkaðar, höfum við kost á að setja hvernig þeir verða settir á efri ás ef ílátið er stærra en krafist er.
Ef við setjum lágmarkshæð hússins okkar til 1200px, skipulag okkar lítur svona út .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Við getum nú notað eigið jöfnu efni til að leggja fram hlutina yfir fulla efri ásinn.
Eiginleikar samræmingarinnar innihalda sex stillingar: miðju, beygja-endir, beygja-byrjun, rúm-kringum, bil milli og teygja. Þessar gildi bera sömu niðurstöður og annars staðar: miðju, aðlögun að annarri endanum, jafnvægi jafnt eða teygja.
Hér er kynning með eigninni sett í rúm-kringum.
Hingað til hafa allar eignir sem við höfum litið verið settar á ílátið. Til þess að fínstilla atriði er flexbox einnig með fjölda eiginleika sem hægt er að stilla á einstökum hlutum.
Til að skýra þetta, skulum við fjarlægja nokkrar af kóða okkar:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomHér er hvernig það lítur út.
Fyrsta sveigjanleiki hlutinn er ruglingslega heitir sveigjanlegur eign. flex er verðmæti sýna eignarinnar á ílátinu, en það er líka eign í eigin rétti.
Sveigjanleg eign er stytting fyrir sveigjanlegan, sveigjanlegan og sveigjanlegan eiginleika. Hlutverk þessara eiginleika er að teygja eða leiðrétta stærð efnisins svo að það fylli plássið alfarið.
Sveigjanleg eignin lýsir þeim atriðum sem þau geta stækkað, ef þess er krafist, þannig að hlutirnir fylli breiddina (fyrir beygja stefnu: röð ) og hæð (fyrir beygja stefnu: dálki ) að fullu.
The Flex-vaxa eign tekur hlutfall. Svo ef við setjum sveigjanlegan eign til 1, verða öll atriði okkar í sömu stærð og þú getur séð hér .
.room {background:#00AAF2;height:90px;flex-grow:1;}Til viðbótar við að jafna stærð, getum við einnig stillt mismunandi hlutföll. Ég vil samt að eldhúsið mitt sé stærra en herbergið mitt, svo við skulum laga það í þessari kynningu .
.kitchen {height:300px;flex-grow:2;}flex-shrink virkar nákvæmlega eins og beygja-vaxa nema að það skreppir hlutinn ef þörf krefur, í stað þess að auka hana.
Ef þú endurstillir vafrann muntu sjá að í mismunandi stærðum er eldhúsið mitt ekki tvöfalt tvöfalt breidd hússins. Það er vegna sveigjanlegrar eignar.
flex-grunnur ákvarðar hvernig beygja-vaxa og beygja-skreppa eiginleika eru reiknuð. Það hefur 2 gildi: sjálfvirkt (sjálfgefið) og 0.
Ef stillt er á 0 er tekið tillit til heildar hlutans. Ef stillt er á sjálfvirkt farartæki er það padding um innihald hlutans sem er breytt. Með öðrum orðum, 0 hunsar stærð innihalds hlutarins við útreikning og sjálfvirkt tekur það tillit til þess. Það er hagnýtt skýringarmynd veitt af W3C sem útskýrir þetta.
Hér er kynning af því sem gerist þegar ég stilli sveigjanlegan grundvöll: 0 á dæmi hér að ofan.
flex-grundvöllur: 0 er sérstaklega gagnlegt ef þú vilt geyma atriði jafnt og óháð efni þeirra.
Eins og fram kemur hér að framan, er sveigjanleg eign skothandur fyrir þessar eignir og þú munt finna það áreiðanlegasta leiðin til að setja þessi gildi.
Röð gildi er sveigjanlegt, vaxið, sveigjanlegt, sveigjanlegt. Svo, til að stilla vaxtarverðmæti 2, lækkunarverð 1 og grundvöllur 0, notarðu:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Einn af bestu eiginleikum flexbox er hæfni þess til að breyta röð hlutanna án þess að hafa áhrif á markup; Þetta er sérstaklega gagnlegt fyrir aðgengi, þar sem það gerir okkur kleift að merkja merkingu á viðeigandi hátt og síðan birta það á bestan hátt.
Til að gera þetta notum við vörulista hlutarins.
Að horfa á dæmi okkar er salerni rétt við hliðina á eldhúsinu. Ég vil frekar að það var við hliðina á svefnherbergjunum, svo ég geti hoppa beint inn í sturtu á morgnana, svo skulum færa það. Það er nú 2. hluti, við viljum að það sé þriðja. Þannig að við setjum eign sína í samræmi við það í þessari kynningu .
.washroom {height:60px;order:2;}Sjáðu hvernig það hoppaði alla leið til loka röðarinnar? Það er við hliðina á svefnherbergi, en ekki hvernig við ætluðum. Þetta er stórt gotcha í flexbox, vegna þess að margir forritarar (sjálfur innifalinn) búast upphaflega með því að röðin virkar eins og fylki.
pöntunin virkar í raun eins og CSS ' z-vísitölu, sem þýðir að ef þú gerir ekki grein fyrir pöntun fyrir hlut þá er gert ráð fyrir að það sé lægra í röð en hlutur sem gildi hefur verið skilgreint fyrir.
Við viljum að salerni skipti með stofunni, svo í þessari kynningu Eina aðra hluti sem þurfa pöntun er svefnherbergið s.
.washroom {height:60px;order:2;}.bedroom {order:3;}Takið eftir því hvernig bæði svefnherbergi s deila sama raðnúmeri? Í tilvikum eins og þeim mun vafrinn koma aftur á DOM pöntunina.
Eiginleikinn endanlega hlutar er jöfn. Það er notað til að breyta röðun hlutarins á efri ásnum. Jöfnuðir hlutir eru notaðir til að samræma allar atriðin og þessi eign gefur þér kost á að taka þátt í því umbúðum.
Það tekur sömu fimm gildi og samsvarandi eignir á ílátinu: grunnlínu, miðju, beygja-endir, beygja-byrjun og teygja.
Hér er kynning af salerni aftur í takt.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox er öflug valkostur til að leggja fram efni. Þó að það sé ekki ætlað að leggja fram heilar síður, þá gerir betri stuðningur við Grid Layout það frábært, sérstaklega fyrir farsíma fyrstu vefsíður.
Til að sýna fram á að við ætlum að setja saman einfaldan síðu sem notar nokkrar af þeim aðferðum sem lýst er að ofan.
Fyrst er merking okkar og nokkrar grunnstíll fyrir síðuna.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Eins þú getur séð Ég hef div með kennimyndinni . Inni síðu hefur ég óskráð lista yfir fréttahluti. Eftir fréttirnar hef ég hausinn, sem er undir fréttinni til hagsbóta fyrir aðgengi. Að lokum hef ég fót.
Það fyrsta sem ég vil gera er að færa hausinn upp efst á síðunni. Til að gera það munum við setja síðu til að vera flexbox ílát. Þá setjum við stefnuna í dálki. Gefðu síðan pöntun til hvers barnsþáttar síðu .
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Næsta skref er að leggja fram hausinn. Barnþættir inni í bikarglasílátum geta verið ílátskassar í eigin rétti, þannig að við getum notað flexbox til að jafna plássið í upphafseiningunum.
Við skulum setja hausinn fyrir að vera flexbox ílát, þá skulum plássið innihald jafnt og án viðbótar púða við hliðina og lokum, vertu viss um að matseðillin séu á sama grunnlínu og lógóið.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Fréttatilkynningar okkar eru staðhæfingar fyrir lögun sögur, þannig að þeir þurfa að vera veruleg stærð til að búa til pláss fyrir texta og mynd eða myndskeið. Þannig að við þurfum þá að hula.
Við skulum setja fréttaflokkinn sem flexbox ílát. Næstum skulum gefa fréttunum einhverjar lágmarksstærð og nokkrar litir svo við getum séð þau greinilega.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Nú þurfum við að setja fréttaílátið í vefinn og fréttaritið er að auka til að fylla út plássið.
#news {order:2;display:flex;flex-flow:row wrap;}Áskorunin sem við höfum núna er að þegar fréttin er ekki jafnt dreift, er stærsta hlutinn (G) neðst. Á flestum vefsvæðum viljum við gefa stærsta pláss til efsta efnisins. Við getum lagað þetta með því að setja vefinn á vefinn.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Það endurskipuleggur hlutina, en lestur frá efra til vinstri, þau eru nú ónýtt. Þannig að við þurfum að snúa við röðinni, með því að stilla stefnuna til að snúa aftur.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Það setur hlutina í röð, lestur frá vinstri til hægri, frá toppi til botns; með stærri hlutum alltaf efst. En ég vil ekki þurfa að breyta röð sögunnar í mínum merkingu til að þvinga hlut A til að koma fyrir lið B. Svo það síðasta sem ég þarf að gera er að breyta röð hlutanna.
.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íðasti þátturinn sem á að stilla er fótinn. Við viljum leggja það út, líkt og hausinn, en vegna þess að fóturinn hefur aðeins þriggja barnaþætti (samanborið við fjóra höfnina) ætlum við að setja málið í tvisvar sinnum eins breitt og lógóið og listinn .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Það virkar vel í skrifborðsstærðum, en skreppa niður vafrann þinn og þú munt sjá að það er of þröngt á litlum tækjum. Svo skulum við breyta kóðanum þannig að það sé sett fram sem dálkar undir 600px og breytist í röð yfir 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;}}Og þarna hefurðu það. Nútíma nálgun að leggja fram efni á vefsíðu, sem er víða stutt og auðvelt að framkvæma.
Styrkur flexbox er að hægt sé að sameina eiginleika þess til að gefa okkur nákvæma stjórn á útliti okkar, með einfaldasta mögulega setningafræði.