Verdienen Sie Geld mit Ihren Tech-Blogs, Gadgets und Tipps

FlexBox täydellinen opetusohjelma aloittelijoille?

Huomautus: Seuraava artikkeli auttaa sinua: FlexBox Complete Tutorial for Beginners?

Tärkeys Flexbox-harjoittelusta CSS-versiossa 3 ei ole piilotettu keneltäkään. Johdatus FlexBoxiin -artikkelissa opimme lisää FlexBoxista sekä käytännön esimerkin. FlexBox on siis työkalu, jonka avulla voit suunnitella yksisivuisia web-elementtejä helposti, nopeasti ja vastuullisesti näyttämällä elementtejä yhdessä ulottuvuudessa. Se tukee myös erilaisia ​​FlexBox-selaimia, mikä on herättänyt monien kehittäjien kiinnostuksen käyttää tätä hyödyllistä työkalua. Keskustelimme myös FlexBoxin käytön eduista ja aloitimme lopulta koodauksen kahdella esimerkillä. Siksi tässä artikkelissa opetamme FlexBoxia tarkemmin.

Flex-säiliö

Aivan kuten CSS Grid -sivua suunniteltaessa elementit sijoitetaan ylätason ruudukkoon, jota kutsutaan säiliöksi, FlexBoxissa on pitoelementti, jota kutsutaan joustosäiliöksi:

.flex-container { näyttö : flex; taustaväri: DodgerBlue; } .flex-container > div { taustaväri : # f1f1f1 ; marginaali: 50px; täyte: 50px; kirjasinkoko: 30px; } < div class = "flex-container" > < div > 1 div > < div > 2 div > < div > 3 div > div >

Tämä lomake määrittää säilön:

Flex-säiliö

FlexBoxissa on määritetty joukko toimintoja siten, että ne on määritetty vain omistajalle. Näitä Ominaisuuksia ovat:

  • Mainos
  • Flex suunta
  • Joustava virtaus
  • Perustele sisältö
  • Tasaa sisältö
  • Kohdista elementit

Seuraavassa FlexBox-opetusartikkelissa selitämme jokaisen näistä ominaisuuksista.

Mainos

Tässä FlexBox-opetusohjelmassa selitämme FlexBox-näyttötoiminnon.

Kuten alla olevasta kuvasta näkyy, kaikki div:t ovat oletusarvoisesti display:block, joten jokainen div vie koko sivun leveyden, jolloin seuraavat divit menevät alas eivätkä mahdu vierekkäin:

Vastaanottaja Aloita Flexboxista , meidän on muutettava pidikkeestämme flexbox. FlexBox-pidikkeen määrittämiseksi meidän on määritettävä näyttöarvo flex tai inline flex:

.flex-container { näyttö : flex | inline flex; }

Flexbox koulutus

Tässä tapauksessa elementit eivät enää vie koko sivun leveyttä ja ne sijoitetaan vierekkäin riviin. Tämä muutos saattaa vaikuttaa yksinkertaiselta, mutta olemme itse asiassa mahdollistaneet jotain voimakasta kulissien takana.

Flex suunta

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Flex Direction -ominaisuuden.

FlexBoxin säiliössä on kaksi akselia:

  • pääakseli
  • Poikittaisakseli: poikittaisakseli

Nämä akselit on oletusarvoisesti merkitty tämän artikkelin ensimmäisessä kuvassa ja huoltoosiossa.

Edellisen osan kuvassa näimme, että kaikki divit sijoitettiin vaakasuoraan vasemmalta oikealle, kun asetimme näytön Flex-asentoon. Tämä sijoittelu johtuu siitä, että oletusarvoisesti elementit sijoitetaan ja tsaroidaan pääakselia tai pääakselia pitkin vasemmalta oikealle.

Voit muuttaa pääakselia ja oletustilaa Flex-direction-ominaisuuden avulla. Oletusarvoisesti tämän ominaisuuden arvo on “Rivi”, mutta jos muutamme tämän ominaisuuden arvoksi “Sarake”, meillä on tämä:

FlexBox koulutus

Kuten kuvasta näkyy, jos vaihdamme tämän ominaisuuden arvoon Column, diivas ovat pystysuorat ja ylhäältä alas. Tässä on myös tärkeää huomata, että asettamalla sarakkeen arvon tälle ominaisuudelle elementit eivät ole akselin poikkisuunnassa. Tämä arvo saa pää- ja poikittaisakselin siirtymään, jolloin elementit ovat pystysuorat. Flex-Direction-ominaisuudella on myös muita arvoja; Mukaan lukien:

  • Viivan vaihto: saa elementit siirtymään oikealta vasemmalle.
  • Sarake-käänteinen: saa elementit sijoittumaan alhaalta ylös.

.flex-container { näyttö : flex; Taivutussuunta: viiva | Sarake | Sarakkeen vaihto | rivi taaksepäin; }

Seuraava kuva näyttää eron sarakkeen ja sarakkeen käänteisen välillä:

Flexbox koulutus

Flex-kalvo

Tässä FlexBox-opetusohjelman osassa selitämme FlexBoxin Flex Wrap -ominaisuuden. Kuten aiemmissa osissa näimme, oletusarvoisesti kaikki elementit on kohdistettu. Voit käyttää flex-wrap-ominaisuutta pakottaaksesi jokaisen elementin olemaan useilla riveillä, joista kutakin kutsutaan joustoviivaksi.

  • nowrap: (oletus) Elementit sijoitetaan vierekkäin riville.
  • Wrap: Elementit on järjestetty useisiin riveihin. Ne on järjestetty oikealta vasemmalle RTL-sivuilla ja vasemmalta oikealle LTR-sivuilla.
  • Wrap Reverse: Tämä arvo on rivitysarvon käänteisluku.

.flex-container { näyttö : flex; Flex wrap: nowrap | kääri | kääri käänteinen; }

FlexBox koulutus

Flex Flow

Tässä FlexBox-opetusohjelman osassa selitämme FlexBoxin Flex Flow -ominaisuuden, jonka avulla voit säätää Flex Direction- ja Flex Wrap -arvoja. Oletusarvo on rivi nowrap.

.flex-container { näyttö : flex; flex-flow: rivinvaihto; }

Perustele sisältö

Tässä FlexBox-opetusohjelman osassa selitämme FlexBoxin Tasaa sisältö -ominaisuuden. Tämän ominaisuuden avulla voit hallita, kuinka elementit kohdistetaan pääakselilla. Tässä erot pää- ja poikittaisakselien välillä selkiytyvät. Tämä attribuutti hyväksyy 5 pääarvoa:

  • Flex-Start: on oletusarvo ja saa elementit olemaan pääakselin alussa. Jos flex-direction-arvo on yhtä suuri kuin rivi, kaikki div:t tasataan vasemmalle sen jälkeen, kun Justify-Content-attribuutin flex-alkuarvo on asetettu.
  • Flex End: Kaikki elementit on kohdistettu oikealle.
  • Keskusta: Elementit ovat keskellä.
  • Välilyönti: Kaikkien elementtien väliin lisätään sama tila. Huomaa, että alussa tai lopussa ei ole välilyöntiä.
  • Välilyönti: Ero tämän tapauksen ja edellisen välillä on, että välilyönnit lisätään alkuun ja loppuun.

.flex-container { näyttö : flex; perustele-sisältö: Flex-Start | Flex End | Keskimmäinen | välilyönnit | tilaa ympärillä; }

Flexbox koulutus

Tasaa sisältö

Tässä FlexBox-opetusohjelmassa selitämme Align Content -ominaisuuden FlexBoxissa.

Jos taipuisassa säiliössä on enemmän tilaa kuin joustavissa viivoissa, tämä ominaisuus voi määrittää, kuinka ne on järjestetty. Tasaa sisältö -ominaisuuden arvot ovat yhtä suuria kuin tasaus-sisältö -ominaisuuden arvot, ja niillä on vain yksi arvo enemmän kuin tasaus-kohdistus. Nämä arvot ovat:

  • flex-start: Tämä arvo lisää flex-viivat flex-säiliön alkuun.
  • flex-end: Tällä arvolla joustavat kaapelit kerätään flex-säiliön päähän.
  • center: Tällä arvolla joustavat kaapelit kerätään joustosäiliön keskelle.
  • space-beveen: Tila jakautuu tasaisesti joustoviivojen välillä. Ensimmäinen rivi on Flex-säiliön alussa ja viimeinen rivi lopussa.
  • space-around: Tyhjä tila jaetaan tasaisesti joustoviivojen kesken.
  • venytys: (oletus) Joustavat viivat piirretään täyttämään aukot.

.container { näyttö : flex; kohdista-sisältö: Flex-Start | Flex End | Keskimmäinen | välilyönnit | tilaa ympärillä | venyttää; }

FlexBox koulutus

Kohdista elementit

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Align Elements -ominaisuuden. Jos ymmärrät Tasaa sisältö -ominaisuuden hyvin, sinulla ei ole myöskään ongelmia tämän ominaisuuden kanssa. Tämä ominaisuus on hyvin samanlainen kuin perustelusisältö. justify-content tasaa kohteet pääakselin perusteella ja align-items -attribuutti tasaa kohteet poikkiakselin perusteella. Kohteita kohdistavat arvot ovat:

  • Flex-Start: Elementit sijoitetaan ristilähtökohtaan.
  • Flex-End: Elementit sijoitetaan poikittaispäähän.
  • Keskiosa: Kohteet ovat joustoviivan keskellä.
  • Perustaso: Elementit on kohdistettu niiden viivojen mukaan.
  • venytys: (oletus) Jos elementtien korkeutta ei ole määritetty, elementit venytetään ja täyttävät taivutusviivan.

.flex-container { näyttö : flex; kohdista kohteet: Flex-Start | Flex End | Keskimmäinen | Perustaso | venyttää; }

Flexbox koulutus

Jos esimerkiksi haluamme kohdistaa saksan pystysuoraan keskelle, meillä on:

html, body { korkeus : 100 % ; marginaali: 0; } body { -webkit-align-items: center; -ms-flex -align: center; kohdista kohteet: keskellä; Näyttö: -webkit-flex; Näyttö: joustava; }

Tässä koodissa käytimme Flexboxin ominaisuuksia ja määrityksiä varmistaaksemme, että rungon sisältö sijoitetaan kohdistuksen keskelle. Tätä varten asetamme ensin näytön Flex-asetukseksi ja Orientation-asetukseksi Centerin ja asetamme valmistajan etuliitteet lisätukea varten.

Huomautus venytysarvosta

Jos haluamme venytysarvon toimivan ja halutun elementin vievän koko poikkiakselin tilan, meillä on kaksi vaihtoehtoa:

  • Älä käytä korkeusmääritettä haluamissasi elementeissä.
  • Jos käytät korkeutta, aseta arvoksi Auto. Huomaa, että kun määritämme elementin height-attribuutin, se ohittaa venytyksen arvon, joten elementti ei tässä tapauksessa vie koko tilaa.

Huomautus perusviivan korkeudesta

Jos asetamme attribuutin arvoksi “perusviiva”, elementit säädetään siten, että kappaleen alareuna on tasattu ja tasattu div:n sisällä. Jos diivojen sisällä ei ole kantapäätä, diivadit kohdistetaan ala-asentoonsa. Kuten alla:

FlexBox koulutus

Flex-tuotteet

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Flex Item -toiminnon.

Tavarat, jotka on sijoitettu pidikkeen sisään ja lapsena, ovat nimeltään Flex Item. Lasten joustamiseksi riittää, että laitat ne div-kenttään, kuten seuraava koodi HTML-tunnisteessa, eikä tyyliin tarvitse määrittää tiettyä luokkaa:

< div class = "flex-container" > < div > 1 div > < div > 2 div > < div > 3 div > < div > 4 div > div >

Muista kuitenkin, että elementeillä, kuten pidikkeellä, on omat ominaisuutensa, joista keskustelemme FlexBox-opetusartikkelin seuraavissa osissa.

Lasten ominaisuudet (Flex-tuotteet)

Kuten FlexBoxissa totesimme, joukko toimintoja on määritetty liitettäviksi vain lapsille. Näitä ominaisuuksia ovat:

  • komento
  • Kasvata joustavuutta
  • Ja flex shrink
  • Joustava pohja
  • taivuttaa
  • kohdista itsesi

Alla selitämme jokaisen näistä ominaisuuksista.

komento

Tässä FlexBox-opetusohjelman osiossa selitämme FlexBoxin järjestystoiminnon, joka voi määrittää elementin sijainnin muiden elementtien joukossa. Oletusarvo on 0. Jos vain yhden tuotteen tilausarvo on määritetty, tämä nimike sijoitetaan kaikkien nimikkeiden jälkeen; Jos tämä ominaisuus on kuitenkin määritetty kaikille kohteille, kohteiden sijainti voidaan määrittää. Tämä ominaisuus on yksi responsiivisen suunnittelun hyödyllisimmistä ominaisuuksista. Voit tilata määrittämällä jokaiselle tuotteelle erillisen luokan tai määrittämällä sen suoraan HTML:ssä seuraavasti:

< div class = "flex-container" > < div style = "tilaus: 3" > 1 div > < div style = "tilaus: 2" > 2 div > < div style = "tilaus: 4" > 3 div > < div style = "järjestys: 1" > 4 ​​div > div >

Flexbox koulutus

Kasvata joustavuutta

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Flex Grow -ominaisuuden. Tämä ominaisuus määrittää kyvyn kasvattaa elementtiä. Flex-Grow hyväksyy numeerisen arvon ilman yksikköä. Oletusarvo on 0; Tämä tarkoittaa, että elementtejä ei voi suurentaa. Jos Flex-säiliössä on tyhjä tila ja annat sille Flex Grow: 1 -tuotteen, tuote kasvaa siihen pisteeseen, että tyhjä tila katoaa pidikkeestä.

Huomaa, että kun haltijan Flex-Direction-ominaisuus on yhtä suuri kuin Rivi, Flex-Grow-toimintoa sovelletaan elementin leveyteen. Jos tämän ominaisuuden arvo on yhtä suuri kuin Column, Flex-Grow käytetään korkeuteen.

< div class = "flex-container" > < div style = "flex-grow: 1" > 1 div > < div style = "flex-grow: 1" > 2 div > < div style = "flex -grow: 8 " > 3 div > < div style = " flex-grow: 1 " > 4 ​​Div > div >

Jos kaikki flex-elementit flex-grow: 1; No niin, ne kasvavat kaikki samankokoisiksi. Jos asetat jommankumman elementin flex-grow-arvoksi 2, tämä elementti on kaksi kertaa toisen elementin kokoinen.

FlexBox koulutus

Joustokutistus

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Flex-kutistumisominaisuuden. Tämä ominaisuus määrittää kyvyn kutistaa elementtiä tarvittaessa. Oletusarvo on 1, mikä tarkoittaa, että elementtejä voidaan kutistaa. Jos pidikkeen Flex-Wrap-ominaisuus on yhtä suuri kuin nowrap, elementit kutistuvat, kunnes niiden leveys saavuttaa 0:n:

Flexbox koulutus

Jos nyt asetamme yhden elementin flex shrink -arvoksi 2, tämä elementti kutistuu 2 kertaa muihin elementteihin verrattuna.

FlexBox koulutus

Esimerkkikoodi:

< div class = "flex-container" > < div > 1 div > < div > 2 div > < div style = "flex-shrink: 0" > 3 div > < div > 4 div > div >

Joustava pohja

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Flex base -funktion, joka määrittää elementin leveyden tai korkeuden perusarvon. Tämä tarkoittaa, että leveys tai korkeus (riippuen sarakkeesta tai -rivistä) ei saa olla pienempi kuin tämä perusarvo. Tämä ominaisuus toimii kuten “min-height” ja “min-width”. Tämän ominaisuuden oletusarvo on “auto”, mikä tarkoittaa, että joustavat elementit voidaan kutistaa nollaan leveyteen tai korkeuteen.

< div class = "flex-container" > < div > 1 div > < div > 2 div > < div style = "flex-basis: 200px" > 3 div > < div > 4 div > div >

Flexbox koulutus

Taivuttaa

Tässä FlexBox-opetusohjelmassa selitämme FlexBoxin Flex-toiminnon. Tämä ominaisuus on itse asiassa lyhenne sanoista Flex-Grow, Flex-Shrink ja Flex-Base. Seuraavassa koodissa flex-arvot on määritetty kommenteissa. Toinen ja kolmas arvo (Flex-Shrink ja Flex-Base) ovat valinnaisia.

< div > 1 div > < div > 2 div > < div style = "flex: 0 0 200px" > 3 div > < div > 4 div > div

FlexBox koulutus

Kohdista itsesi

Tässä FlexBox-opetusohjelman osassa selitämme FlexBoxin tasausominaisuuden. FlexBox-teeman viimeisenä jäljellä olevana ominaisuutena esittelemme kohdista itse -ominaisuuden. Tämä ominaisuus määrittää kohteen sijainnin ja tasauksen yksitellen ja ohittaa kyseisen kohteen tasauskohteet -ominaisuuden. Tässä ominaisuudessa käytetyt arvot ovat samanlaisia ​​kuin align-items -ominaisuuden arvot. Oletusasetus on Automaattinen. Tässä tapauksessa sijainti seuraa align-items -attribuuttia. Jos esimerkiksi käytät tätä koodia, vain ensimmäinen neliö on keskellä ja loput alussa:

#container { align-items : flex-start; } .square #one { align-self : center; }

Oletetaan nyt, että sinulla on 4 ruutua ja käytä align-self-ominaisuutta kahdelle ja align-items: center and flex-direction: riviominaisuuksia muille. Tämä asettaa kaksi kiinteää elementtiä oikealle keskelle ja siirtää kaksi elementtiä vasemmalle käyttämällä align-self -attribuuttia. Tämän seurauksena tulos näyttää tältä:

Flexbox koulutus

Reaktiivinen sivusto FlexBoxilla

Tutustuttuamme FlexBoxiin tässä osiossa haluamme suunnitella yksinkertaisen responsiivisen sivun FlexBoxilla.

HTML-lähdekoodi:

< div class = "container" > < div class = "tuote nimike1 header" > header div > < div class = "tuote nimike2 sivuun syrjään1" > aside1 div > < div class = "tuote nimike3 main" > main div > < div class = "tuote nimike4 sivuun 2" > sivuun2 div >

alatunniste div > div >

CSS-koodi:

.container {marginaali: 10px; täyte: 10px; Minimikorkeus: 150 pikseliä; taustaväri: #a13647; Näyttö: joustava; flex-flow: rivinvaihto; } .container .item { background-color : # d84a43 ; Väri: #fff; marginaali: 10px; täyte: 10px; Minimikorkeus: 50 pikseliä; } .item { flex : 1 ; } .item .header { flex : 100% ; } .item .side { flex : 0 200px ; korkeus: 150px; } .item .main { flex : 1 auto; } .item .footer { flex : 100% ; } @medianäyttö ja (max-leveys: 950px) se .item .header { järjestys: 1; } .item .side { flex : 1 auto; } .tuote .saide .saide1 { järjestys: 3; } .tuote .saide .saide2 { järjestys: 4; } .item .main { järjestys: 2; Jousto: 1 100 %; } .item .footer { järjestys: 5; } } @medianäyttö ja ( max-width : 600px ) se .item .side { flex : 100% ; } }

FlexBox koulutus

Poista reuna FlexBoxilla

Jos olet työskennellyt CSS:n kanssa, olet todennäköisesti törmännyt ongelmaan monissa paikoissa, joissa haluat koota useita elementtejä ja säätää niiden välistä väliä reunuksella. Tämä tehdään usein kokoamalla valikon jäseniä. Ongelmana on, että välilyöntien lisäämiseksi kohteiden väliin asetetaan ominaisuus, kuten “margin-right”, mutta viimeisen valikon kohdan oikealle puolelle luodaan ylimääräinen väli, ja tämän ylimääräisen tilan ongelma on ongelmallinen. Harkitse esimerkiksi seuraavaa koodia:

< html > < head > < otsikko > Listan otsikko > < style type = "text / css" > * * box-sizing : border-box; marginaali: 0; pehmuste: 0; } .clear: ennen, .clear: after { content: “” ; Näyttö: pöytä; } .clear : after { clear: Molemmat; } .list { leveys: 800px; luettelon tyyli: ei mitään; marginaali: 100px auto 0; taustaväri: keltainen; } .henkilö { leveys : 23 % ; Marginaalioikea: 2,66 %; kellua: vasen; taustaväri: punainen; täyte: 10px; } tyyli > pää > < body > < ul class = "luettelo selkeä" > < li class = "person" > Element 1 li > < li class = "person" > Element 2 li > < li class = "person" > Jakso 3 li > < li class = "person"> kohta 4 li > ul > body > html >

Näet, että olemme lisänneet valikon, jossa on 4 li ja tyylin sisällä olemme asettanut kunkin leveydeksi 23% ja määrittäneet niiden välisen tilan marginaalioikealla. Yllä olevan kuvan nykyinen tulos näyttää tältä:

Flexbox koulutus

Kuten kuvasta näkyy, viimeinen kohde ei ole saatavilla yllä olevan ylimääräisen tilaongelman vuoksi. Yleinen tapa ratkaista tämä ongelma on poistaa ylimääräinen tila niin, että viimeinen elementti menee kuvan alaosaan:

< html > < head > < otsikko > Listan otsikko > < style type = "text / css" > * * box-sizing : border-box; marginaali: 0; pehmuste: 0; } .clear: ennen, .clear: after { content: “” ; Näyttö: pöytä; } .clear : after { clear: Molemmat; } .list { leveys: 800px; luettelon tyyli: ei mitään; marginaali: 100px auto 0; taustaväri: keltainen; } .henkilö { leveys : 23 % ; Marginaalioikea: 2,66 %; kellua: vasen; taustaväri: punainen; täyte: 10px; } .henkilö: viimeinen lapsi { marginaali-oikea: 0; } tyyli > pää > < body > < ul class = "luettelo selkeä" > < li class = "person" > Element 1 li > < li class = "person" > Element 2 li > < li class = "person" > Jakso 3 li > < li class = "person"> kohta 4 li > ul > body > html

Näet, asetimme väärän luokan viimeiselle lapselle ja asetimme oikean marginaalin arvoksi 0. Tämän seurauksena lisätilaa menetettiin ja kaikki kohteet sisällytettiin valikkoon. On myös helpompi tapa poistaa väärät luokat, kuten n:s, ensimmäinen ja viimeinen lapsi, eli käyttää FlexBoxia. Voit helposti lisätä välilyöntejä elementtien väliin asettamalla “välilyönti”-arvon “justify-content”-attribuutille ja tekemällä seuraavat toimet:

< html > < head > < otsikko > Listan otsikko > < style type = "text / css" > * * box-sizing : border-box; marginaali: 0; pehmuste: 0; } .list { display : flex; perustelu-sisältö: välilyönnit; leveys: 800px; luettelon tyyli: ei mitään; marginaali: 100px auto 0; taustaväri: keltainen; } .henkilö { flexbase: 23%; taustaväri: punainen; täyte: 10px; } tyyli > pää > < body > < ul class = "luettelo selkeä" > < li class = "person" > Element 1 li > < li class = "person" > Element 2 li > < li class = "person" > Jakso 3 li > < li class = "person"> kohta 4 li > ul > body > html >

Tässä koodissa asetamme luetteloluokan näyttötyyliksi Flex ja Flex-perusattribuutiksi Person-luokassa 23%.

Esittelemme muutamia hyviä lisälähteitä:

Tällä sivulla opetettua sisältöä voi katsella ja harjoitella interaktiivisesti. Tämän interaktiivisen osion rakennusmääräykset on ladattu niiden suuren koon vuoksi ja ne voidaan ladata täältä.

Lopuksi esittelemme joitain verkkoresursseja Flexbox-opetusohjelman suorittamiseksi:

  • Työkalut : Online-työkalu, jonka avulla voit luoda oman mallin ja kehyksen Flexboxin pohjalta ja toimittaa CSS-koodin ulostuloon.
  • Bolma runko: Tehokas ja ajantasainen FlexBox-pohjainen CSS-kehys reagoivien mallien ja edistyneen luokituksen luomiseen.
  • verkkosivusto : Verkkosivusto responsiivisten mallien ja monimutkaisten rakenteiden suunnitteluun ja luomiseen.
  • Ensimmäinen sivu Ja toinen sivu : kaksi englanninkielistä sivua, joissa sisällön täydellinen ja visuaalinen koulutus.
  • Pelisivusto : Erittäin houkutteleva sivusto mainittujen esineiden opettamiseen pelin ohessa.

Diplomi:

Tässä artikkelissa tutustuimme FlexBoxiin ja suunnittelimme sitten responsiivisen sivun. Korjasimme CSS:n yleiset ongelmat FlexBoxin avulla ja otimme lopulta käyttöön joitain muita verkkoresursseja.