Haluan sanoa tämän ensin: flexbox on helppoa. Olipa kyse sitten varhaisista adoptioista tai koska olemme oppineet ajattelemaan kellukkeita ja lohkoja, kuulen usein web-suunnittelijoilta, että he ajattelevat, että Flexbox on monimutkainen toteuttaa. Toistan kuitenkin, että flexbox on helppoa.
On olemassa yksi temppu ymmärrystä flexboxista, jota opettelen, minkä jälkeen kaikki on selvää. Mutta ensin haluan puhua siitä, mikä flexbox on.
Flexbox (tai Joustava laatikkoasennusmoduuli antaa sille oikean nimen) on joukko CSS-ominaisuuksia, jotka yhdistävät sisällön määrittämisen reagoivalla tavalla.
Flexbox on ensimmäinen CSS-ulkoasu, joka toimii moderniin verkkoon. On oikein sanoa, että kunnes flexboxia tuettiin, ei ollut layout-tekniikkaa, joka toimi hyvin reagoivan web-suunnittelun kanssa.
Runsaasti hakkereita on kelluva ympäri, kuten asettamalla elementtejä näyttämään: inline-block ja sallien niiden käärimisen. Mutta tämä esitteli useita ongelmia joustaville sivustoille, etenkin valvonnan puutetta ja elementtien koon vaikutusta. Tästä syystä monet reagoivat verkkosivustot käyttävät edelleen JavaScript-toimintoa sisällön sijoittamiseksi.
W3C kuvaa Flexboxia sellaisena kuin se on tarkoitettu UI-elementtien - kuten valikkokohtien - määrittämiseen, sitä ei ole tarkoitettu koko sivujen esittämiseen.
Syy, jota ei ole tarkoitettu koko sivujen ulkoasuun, on, että flexboxilla on kumppani CSS-moduuli, Grid Layout Module joka on tarkoitettu layoutille. Verkkosuunnittelua pidetään sopivimpana tekniikana koko sivun asettelulle. Valitettavasti verkkoon on nykyään hyvin rajallinen tuki, ja "rajallinen" tarkoitan "ei mitään". Jopa Chromein uusin versio ei tue sitä ilman lippuja.
Onneksi selaimen tuki Flexboxille on paljon kattavampi. Ja koska se ratkaisee niin monta nykyaikaista ulkoasua, Flexbox on ihanteellinen työkalu, kunnes verkko on lopullisesti hyväksytty.
Flexbox sopii erinomaisesti sivujen komponenttien suunnitteluun. Flexboksin todellinen voima ja syy, joka toimii paljon paremmin kuin muut layoutvaihtoehdot, tulee tulkitsemasta tyylejä yksittäisten esineiden sijaan eri tuoteryhmien kohdalla.
Asettelua varten meidän on harvoin sijoitettava yksi kohde - jos aiomme tehdä niin, on parempi käyttää paikannusta. Flexbox toimii parhaiten, kun se ohjaa elementtien ryhmiä toisiinsa.
Suunnittele aina asia tarkastelemalla sitä seuraavassa laajemmassa yhteydessä - tuoli huoneessa, huone talossa, talossa ympäristössä, ympäristö kaupunkisuunnitelmassa. - Eliel Saarinen
Sellaisena, flexbox-spesifikaatio on jaettu kahteen osaan, joukkoon ominaisuuksia, jotka viittaavat säiliöelementtiin, ja joukon ominaisuuksia, jotka viittaavat siihen sisältyviin elementteihin.
Selaintuki on tyypillisesti monimutkainen kysymys. Tämä on joustavampaa Flexbokselle, koska flexboxilla on useita eri syntaksia. Varhainen itsemääräämisoikeus, joidenkin selaimen toimittajien itsenäinen kehitys ja iteraattinen prosessi ovat jättäneet meille useita eri flexbox-versioita, joihin kaikki on otettava huomioon.
Onneksi, lisäämällä joitain selaimen etuliitteitä vanhoihin selaimiin, voimme nyt luottaa siihen. Mukaan caniuse.com , nykyisistä mainstream-selaimista vain IE9 on ongelma meille.
Onneksi, kuten kaikki CSS, jos flexbox epäonnistuu, se epäonnistuu. Tämä tarkoittaa sitä, että IE9 vain sivuuttaa sen.
Komiteoiden ja yritysten eri alojen välisen horjuvan yhteistyön puutteen vuoksi Flexboxin toteutus on lähes ristiriidassa 00-luvun alun kaaoksen kanssa, kun jokainen yksittäinen selain toteutti jokaisen omaisuuden ainutkertaisesti ja väärin samanaikaisesti. Jokainen hyötyi epäilystä, Flexboxin kolme toteutusta olivat yksinkertaisesti iteratiivinen lähestymistapa, joka on johtanut siihen hyödyllisimpään yhteiseen ratkaisuun.
Flexbox-syntaksissa on kolme versiota, joiden on oltava tietoisia: vanhoja, inbetween ja new. Eri selaimet tukevat eri syntaksia, IE10 esimerkiksi tukee inbetween syntaksia.
Aivan kuten selaimen etuliitteissä, kirjoitamme Flexbox-syntaksin vanhimmasta uusimpaan, niin että uusin tuettu syntaksi ohittaa vanhat syntaksit.
Esimerkiksi kirjoitamme näytön: taivuta niin:
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*/Selkeyden vuoksi en aio sukeltaa vanhempiin syntaksiin tai keskustella esiprosessoreiden, jälkiprosessoreiden ja erilaisten muuntamiskäsikirjojen ansioiden kanssa. Kaikissa esimerkeissäni aion käyttää oikeaa uutta syntaksia.
Tuotantokoodin osalta käytän sarjaa Sass-miksereitä, jotka laajentavat flexbox-tukea vanhemmille selaimille.
On erinomainen Sass mixin täällä , jonka avulla voit joko estää koodin turvotuksen tai purkaa vanhan syntaksin.
Flexboxin salaisuus on, että se ei ole lainkaan laatikko. Tähän asti kaikki Web-asettelut käyttivät karttasovellusta x ja y pisteiden piirtämiseksi. Flexbox on sen sijaan vektori.
Kuulostaa hyvältä, eikö? Flexbox on vektori, eli määritämme pituuden ja määrittelemme kulman. Voimme muuttaa kulmaa vaikuttamatta pituuteen; ja voimme muuttaa pituutta vaikuttamatta kulmaan.
Tämä uusi lähestymistapa tarkoittaa sitä, että jotkut flexboxin terminologiasta ovat aluksi monimutkaisia. Esimerkiksi, kun kohdistamme kohteet flex-säiliön yläosaan, käytämme taivutus-aloitusta, ei ylä- koska koska muutetaan orientaatiota, flex-start- asetusta sovelletaan edelleen, mutta huippu ei ole.
Kun ymmärrät tämän lähestymistavan, suurin osa flexboxista on poistettu.
Flexboxin syntaksi on jaettu kahteen ryhmään: konttiin ohjaavat ominaisuudet ja ne ominaisuudet, jotka ohjaavat kontin suoria jälkeläisiä. Ensimmäinen on hyödyllisin, joten aloitamme siellä.
Sanotaan, että haluamme varata kohteet lohkon sisällä. Haluamme, että ne sijoitetaan tasaisesti. Flexboxin käyttäminen on todella helppoa. Ensimmäinen asia, jota tarvitsemme, on joitakin merkkejä, jotta voimme kokeilla tätä:
Flexbox Layout Se on a yksinkertainen HTML-sivu , jossa talon div, joka sisältää viisi huonetta div, joista jokaisella on luokka tunnistaa niiden toiminta, keittiö, pesuhuone, oleskelutila ja makuuhuone.
Se, mitä aiomme tehdä, on asettaa talon flexbox-säiliöksi. Kaikki taloon asetetut flexbox-ominaisuudet levitetään sitten sen lapsille ( huoneen s).
Huoneen s suunnittelemiseksi meidän on ensin ilmoitettava talolta jousipakkaussäiliöksi ja kertoa sitten, kuinka haluamme lasten elementtien järjestämisen.
Jos haluat ilmoittaa talolle flexbox-säiliöksi, käytämme seuraavaa koodia:
.house {background:#FF5651;display:flex;}Ja se on se. Olemme luoneet joustavan laatikon. Kaikki mitä tarvitsemme nyt on kertoa Flexbox miten layout huoneen s. Voimme tehdä tämän käyttämällä perusteltua sisältöä .
Perustelu-sisällöllä on viisi mahdollista arvoa: keskipiste, flex-start, flex-end, space-around ja space-between. Nämä keskittävät kohteet, kohdista ne alkuun (joka on joko ylhäältä tai vasemmalta, kuten jäljempänä keskustellaan), loppu (joka on joko pohja tai oikea), välittää ne yhtä suurella tilalla jokaisen kohteen ympärillä tai yhtäläinen tila kunkin kohteen välillä, vastaavasti.
Käytämme tilaa:
.house {background:#FF5651;display:flex;justify-content: space-around;}Tässä on demo . Huomaa, kuinka kahden tilan välillä on kaksinkertainen tilanne kahden ulkoreunan kohdalla? Tämä johtuu siitä, että jokaisella tuotteella on sama tila vasemmalle ja oikealle. Jos olisimme käyttäneet välilyöntejä, ei sen sijaan olisi tilaa.
En ole varma sinusta, mutta taloni pesuhuone on hieman pienempi kuin oleskelutila, ja vaikka minulla on pieni keittiö, haluaisin paljon suuremman. Joten anna joitakin lisäyksiä koodimme heijastamaan sitä:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Kuten näet tämä esimerkki , huoneet ovat edelleen tasaisesti erilleen. Vaikka olemme muuttaneet kokoa. Flexbox on loistava sisällön järjestämisessä.
Kuten edellä käsiteltiin, yksi niistä syistä, että flexbox toimii niin hyvin suunnittelijoille, että sitä kuvataan vektorina. Tällä hetkellä Flexbox tukee vain neljää kulmaa: 0, 90, 180 ja 270 astetta. Joten on paljon yksinkertaisempaa ajatella niitä akselina.
Jos haluat muuttaa akselia, käytämme flex-suunta- ominaisuutta, jolla on neljä mahdollista arvoa: rivi (oletusarvo - kuten yllä olevissa esimerkeissä näet, huoneet on sijoitettu vasemmalle oikealle), rivi-taaksepäin, sarake ja sarake-käänteinen.
Jos muutat flex-suunnan sarakkeeseen, näet tässä demossa että huoneet on nyt asetettu pystysuoraan ylhäältä alas:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Koska olen varma, että voit arvata, rivi-taaksepäin ja pylväs-käänteinen kääntää järjestyksessä kohteet oman flex-kontti.
Huomaat viimeisimmässä esimerkissä, että kun talo ulottuu koko näkymän yli, se ulottuu koko korkeuteen, vaikka se asetettiin flex-suuntaan: sarake.
Jotta voit pelata hienosti CSS: n kartesipohjaisella koordinaatistojärjestelmällä, flexbox-konttia käsitellään lohkotason elementtinä.
Aivan kuten näyttö: lohkolla on toinen näyttö: inline-lohko, niin että näyttää: flex on näyttö: inline-flex.
inline-flex on tällä hetkellä hyödyllisin, jos pudotat joustinelementit olemassa olevaan ulkoasuun ja tarvitset sitä mukavasti kelluilla ja sijoitetuilla elementeillä.
Kuten olemme nähneet, Flexboxin mielestä se ei ole horisontaalisesti tai pystysuorassa, riippumatta siitä, mihin suuntaan valitset, pidetään Flexboxin ensisijaisena akselina.
Mutta Flexbox antaa myös mahdollisuuden hallita asentoa vastakkaisella, toissijaisella akselilla.
Asentoa toissijaiselle akselille ohjaa kohdistus-kohteiden ominaisuus; sillä on viisi mahdollista arvoa: perustaso, keskipiste, flex-end, flex-start ja stretch.
lähtötaso on yleensä hyödyllisin vaihtoehto. Se varmistaa, että tekstin perusviivat säilyvät. Testausta varten meidän on tehtävä joitain muutoksia HTML-tiedostoihimme:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomNäet, että olen lisännyt jonkin tekstin ja tuonut sen, ja sitten sovellettu Google-kirjasinta. Olen myös muuttanut fontin kokoa keittiössä ja pesuhuoneessa, joten on selvä ero.
Kun asetamme kohdistettujen kohteiden ominaisuuden perustasoksi , näet tässä demossa että tekstin lähtötaso vastaa.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}align-items: keskikeskus suuntautuu joko pystysuunnassa (jos flex-suunta: rivi tai flex-suunta: rivi-taaksepäin ) tai vaakasuunnassa (jos flex-suunta: sarake tai flex-suunta: sarake-taaksepäin ). Tässä on demo.
align-items: flex-start kohdistuu ylhäältä ja kohdista-kohteet: taivutus-pää kohdistuu alareunaan (jos flex-suunta: rivi tai flex-suunta: rivi-taaksepäin ) tai vasemmalle ja oikealle (jos flex-suunta: pylväs tai flex-suunta: pylväs-käänteinen ). Tässä on demo.
venytys, on toinen erittäin hyödyllinen vaihtoehto. venytys muuttaa kohteiden kokoa niin, että kukin on sama korkeus (ne kasvavat, eivät kutistu). Tässä on demo.
Muissa esimerkeissämme olemme määrittäneet nimenomaan kohteiden korkeuden, joka riittää kumoamaan flexboxin, jotta näet kohdistusosat: venytystyö on oikein, sinun on poistettava korkeus kaikista luokista paitsi yksi.
Tähän mennessä olemme käyttäneet flexboxia ulkoasuelementteihin niin, että ne ovat koko tilan kokoisia, mutta mitä tapahtuu, kun kohteiden sisältö on liian suuri sovittamaan yhteen riviin?
Tämän demoilemiseksi lisäämään huoneiden kokoa:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomtässä miten se näyttää nyt.
Jos pienennät selaimen ikkunaa, näet, että sisältö on katkaistu, koska siihen ei ole tilaa. Onneksi flexbox määrittää flex-wrap ominaisuuden juuri tähän mahdollisuuteen, jolla on kolme mahdollista arvoa: no-wrap (oletus), kääri ja wrap-reverse.
kääri aiheuttaa kaikki kohteet, jotka ulottuvat säiliön ulkopuolelle, päätyäkseen myöhemmäksi linjalle, aivan kuten tekstirivi ryntää.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Jos höystetät selaimesi, näet tässä demossa kohteet kääritään nyt uuteen riviin. Huomaa, miten kohdistusosat: perusresistanssia sovelletaan edelleen? Flexboxin todellinen teho yhdistää sen ominaisuuksia.
Yksi tärkeä käsite, jonka kattaisin myöhemmin, on se, että flex-wrap: wrap-reverse ei käännä kappaleiden järjestystä, vaan se aiheuttaa kaikki kohteet, jotka ulottuvat säiliön ulkopuolelle päästäkseen etukäteen, kuten nähdään tässä demossa .
Kuten monet CSS-ominaisuudet, joissakin flexbox-ominaisuuksissa on lyhyitä versioita, joita selaimen valmistajat toteuttavat johdonmukaisemmin.
Flex-virtausominaisuus on lyhyempi flex-suunta- ja flex-wrap -ominaisuuksille. Joten kirjoittamisen sijasta:
flex-direction:row-reverse;flex-wrap:wrap;Voimme käyttää lyhennettä:
flex-flow:row-reverse wrap;Yllä, käytimme kohdistettujen kohteiden ominaisuutta kohdistamaan kohteet lähtötilaan, sijaintiin ja venytysosiin. Kuten viimeisimmässä esimerkissä näet, se esiintyy edelleen, mutta se tapahtuu rivillä riveittäin.
Kun esineet on kääritty, meillä on mahdollisuus asettaa, miten ne asetetaan toissijaiselle akselille, jos säiliö on suurempi kuin on tarpeen.
Jos asetamme talon minimaalisen korkeuden 1200px: een, asemoimme näyttää tästä .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Nyt voimme käyttää align-content -ominaisuutta jakamalla kohteet koko toissijaisen akselin kautta.
Kohdistussisällön ominaisuudella on kuusi asetusta: keskipiste, flex-end, flex-start, space-around, välilyönti ja venytys. Nämä arvot tuottavat samoja tuloksia kuin muualla: keskittäminen, kohdistaminen yhteen päähän, tasaisuus tasaisesti tai venyttely.
Tässä on demo kun kiinteistö asetettiin avaruuteen.
Tähän mennessä kaikki ominaisuudet, joita olemme tarkastelleet, on asetettu säiliöosiin. Jotta hienosäätöäisiin tuotteisiin, flexbox tarjoaa myös useita ominaisuuksia, jotka voidaan asettaa yksittäisille kohteille.
Tämän selvittämiseksi poistamme joitain koodeistamme:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomtässä miltä se näyttää.
Ensimmäinen flexbox-kohteen ominaisuus on hämmentävää nimitystä flex- ominaisuus. flex on kontin näytön ominaisuuden arvo, mutta se on myös oma ominaisuus.
Flex- ominaisuus on lyhytsana flex-kasvaa, flex-shrink- ja flex-base- ominaisuuksille. Näiden ominaisuuksien rooli on venyttää tai pienentää sisältöä niin, että se täyttää tilan kokonaan.
Flex-grow- ominaisuus kertoo kohteet, joita ne voivat suurentaa tarvittaessa, niin että kohteet täyttävät täydellisesti leveyden ( flex-suunta: rivin ) ja korkeuden ( flex-suunta: sarake ).
Flex-kasvaa omaisuus suhde. Joten jos asetamme flex-kasvaa omaisuuden 1: lle, kaikki kohteemme ovat samankokoisia kuin näet täältä .
.room {background:#00AAF2;height:90px;flex-grow:1;}Yhden koon lisäksi voimme myös asettaa eri suhteet. Haluan edelleen, että minun keittiö on isompi kuin pesuhuone, joten korjataan tässä demossa .
.kitchen {height:300px;flex-grow:2;}flex-kutistuminen toimii täsmälleen sama kuin flex-kasvaa, paitsi että se kutistuu erää tarvittaessa, eikä laajentaa sitä.
Jos muutat selaimen kokoa, näet, että erikokoisina keittiössäni ei ole täsmälleen sama kuin toisessa huoneessa . Tämä johtuu flex-perusominaisuudesta .
flex-base määrittää, miten flex-kasvaa ja flex-kutistumisominaisuudet lasketaan. Siinä on kaksi arvoa: auto (oletus) ja 0.
Jos asetuksena on 0, koko kohde otetaan huomioon. Jos asetuksena on automaattinen, se on täynnä kohdetta, jonka kokoa muutetaan. Toisin sanoen 0 jättää elementin sisällön koon laskettaessa ja ottaa sen automaattisesti huomioon. Siellä kätevä kaavio W3C: n tarjoama, mikä selittää tämän.
Tässä on demo mitä tapahtuu, kun asetan flex-perusta: 0 yllä olevassa esimerkissä.
flex-basis: 0 on erityisen hyödyllinen, jos haluat avata esineitä tasaisesti riippumatta niiden sisällöstä.
Kuten edellä mainittiin, flex- ominaisuus on lyhytsisältö näille ominaisuuksille, ja näet, että se on luotettavin tapa määrittää nämä arvot.
Arvojen järjestys on joustava kasvu, flex-kutistuminen, flex-perusta. Joten, jos haluat asettaa 2: n kasvavan arvon, kutistumisarvoksi 1 ja 0: n perusteella, käytät:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Yksi flexboxin parhaista ominaisuuksista on sen kyky muuttaa tavaroiden järjestystä vaikuttamatta merkintään. tämä on erityisen hyödyllinen käytettävyyteen, sillä se antaa meille mahdollisuuden koodata merkinnät asianmukaisesti ja näyttää sen sitten optimaalisesti.
Tätä varten käytämme kohteen tilausominaisuutta.
Katsoessamme esimerkkiä pesuhuone on aivan keittiön vieressä. Mieluummin se oli huoneiden vieressä, joten voin hop suoraan aamun suihkussa, joten siirrä se. Se on tällä hetkellä toinen asia, haluamme sen olevan kolmas. Siksi asetamme sen tilausominaisuuden vastaavasti tässä demossa .
.washroom {height:60px;order:2;}Katso, miten se hyppäsi koko matkan loppuun? Se sijaitsee makuuhuoneiden vieressä, mutta ei miten tarkoitimme. Tämä on suuri hankinta flexboxissa, koska monet kehittäjät (itse mukana) alun perin odottavat järjestystä toimivan kuten taulukon.
tilaus tosiasiallisesti toimii kuten CSS: n z-indeksi, mikä tarkoittaa, että jos et nimenomaisesti määrätä kohteen tilausta , sen oletetaan olevan pienempi järjestyksessä kuin kohde, jolle arvo on nimenomaisesti asetettu.
Haluamme, että pesuhuone vaihtaa loungeen tässä demossa vain muut tuotteet, jotka tarvitsevat tilauksen, ovat makuuhuone .
.washroom {height:60px;order:2;}.bedroom {order:3;}Huomaa, kuinka molemmissa makuuhuoneissa on sama tilausnumero? Tällaisissa tapauksissa selain tulee takaisin DOM-järjestykseen.
Lopullinen kohde-ominaisuus on align-self. Sitä käytetään muutettaessa kohteen kohdistusta toissijaisella akselilla. align-kohteita kohdistetaan kaikkiin kohteisiin, ja tämä ominaisuus antaa sinulle mahdollisuuden poistaa kyseinen peittoasetus.
Siinä on samat viisi arvoa kuin kontin vastaava ominaisuus: perusviiva, keskipiste, flex-end, flex-start ja stretch.
Tässä on demo pesualtaan uudelleen suuntautunut.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox on tehokas vaihtoehto sisällön laatimiseen. Vaikka se ei ole tarkoitettu koko sivujen luomiseen, sen ylivoimainen tuki Grid Layoutille tekee siitä erinomaisen vaihtoehdon, varsinkin matkapuhelimen ensimmäisten sivustojen kohdalla.
Osoittaaksemme, aiomme koota yksinkertaisen sivun, joka käyttää joitakin edellä kuvatuista tekniikoista.
Ensin ylös on meidän merkintä ja sivun perusstylejä.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Kuten sinä pystyt näkemään , Minulla on div ja id- sivu. Sisällä sivulla minulla on järjestämättömät uutiset. Uutisaiheiden jälkeen minulla on otsikko, joka on uutissisällön alapuolella esteettömyyden saavuttamiseksi. Lopuksi minulla on alatunniste.
Ensimmäinen asia, jonka haluan tehdä, on siirtää otsikko ylös sivun yläosaan. Tätä varten asetamme sivun flexbox-säiliöksi. Sitten asetetaan suunta pylvääseen. Määritä sitten järjestys jokaiselle sivun lapsisekvenssille.
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Seuraava askel on luoda otsikko. Lapsielementit flexbox-säiliöissä voivat olla flexbox-säiliöitä itsenäisesti, joten voimme käyttää flexboxia otsikoiden tasaiseen tilaan.
Aseta otsikko flexbox-säiliöksi, anna sitten tilaa sisältöä tasaisesti, ilman sivut ylimääräisiä pehmusteita ja lopuksi varmista, että valikkokohdat ovat samalla tasolla kuin logo.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Uutisaiheemme tulevat olemaan paikkamerkkejä suosituimmista tarinoista, joten heidän on oltava huomattavan suuria, jotta he voisivat tehdä tilaa tekstille ja kuvaksi tai videolle. Joten tarvitsemme heitä käärimään.
Let's asettaa uutisjoukon olla flexbox-kontti. Seuraavaksi annamme newsItemille joitain vähimmäismittoja ja värejä, jotta voimme nähdä ne selvästi.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Nyt meidän on asetettava uutissäiliö kääriin ja newsItem s laajentaa täyttämään käytettävissä olevan tilan.
#news {order:2;display:flex;flex-flow:row wrap;}Nyt haasteemme on se, että kun uutisartikkeleita ei jaeta tasaisesti, suurin osa (G) on alareunassa. Useimmilla sivustoilla haluamme antaa suurimman määrän tilaa ylimmälle sisällölle. Voimme korjata tämän asettamalla kääreen kääriin.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Tämä palauttaa kohteet uudelleen, mutta lukee vasemmalta ylhäältä ne ovat nyt epäkunnossa. Joten meidän täytyy kääntää järjestys, asettamalla suunta rivinvaihtoon.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Tämä asettaa kohteet peräkkäiseen järjestykseen, lukemalla vasemmalta oikealle, ylhäältä alas; suurempia kohteita aina yläosassa. Mutta en halua muuttaa tarinoiden järjestystä minun merkinnöiniin, jotta voin pakottaa kohdan A ennen B-kohtaa. Joten viimeinen asia, jonka minun on tehtävä, on muuttaa tavaroiden järjestystä.
.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;}Viimeinen tyylitelty elementti on alatunniste. Haluamme laittaa sen ulos, aivan kuten otsikko, mutta koska alatunnisteella on vain kolme lasta elementtiä (verrattuna otsikkoon neljä), aiomme asettaa kappaleen olevan kaksi kertaa leveämpi kuin logo ja luettelo .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Tämä toimii erinomaisesti työpöydän koossa, mutta pienennä selainta alas ja näet, että se on liian ahtaita pienissä laitteissa. Joten vaihdetaan koodi siten, että se määritetään sarakkeiden alle 600px, ja palaa riville yli 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;}}Ja siellä sinulla on se. Moderni lähestymistapa web-sivun sisällön laatimiseen, joka on laajasti tuettu ja helppo toteuttaa.
Flexboxin teho on se, että sen ominaisuudet voidaan yhdistää antamaan meille täsmällisen hallinnan asetteluissamme yksinkertaisin mahdollisine syntaksina.