Flexbox-opetusohjelma: Opi koodaamaan reagoiva navigointipalkki CSS Flexboxilla

Tässä artikkelissa selitän kuinka luoda navigaattoripalkki, joka sopeutuu erilaisiin näyttökokoihin käyttämällä Flexboxia ja mediakyselyjä.

Tämä opetusohjelma löytyy myös interaktiivisesta kuvaruudusta ilmaisesta Flexbox-kurssistani Scrimbasta.

Jos haluat lukea lisää kurssista, tutustu tähän artikkeliin.

Asennus

Aloitetaan hyvin yksinkertaisen navigaattorin merkinnällä:


    
  • Home
  • Profile
  • Logout

    elementti on joustava säiliömme ja
  • elementit ovat joustavia tuotteitamme. Voit tehdä siitä Flexbox-asettelun seuraavasti:

    .container { display: flex; } 

    Mikä johtaa seuraavaan asetteluun:

    Olen lisännyt muotoilua, mutta sillä ei ole mitään tekemistä Flexboxin kanssa.

    Olen lisännyt muotoilua, mutta sillä ei ole mitään tekemistä Flexboxin kanssa.

    Kuten näette, oikealla puolella on hieman ylimääräistä tilaa. Tämä johtuu siitä, että Flexbox sijoittaa kohteet vasemmalta oikealle, ja jokainen kohde on vain niin leveä kuin sen sisältö pakottaa sen olemaan.

    Koska joustosäiliö on oletuksena lohkotason elementti (ja on leveämpi kuin neljä kohdetta), saamme aukon loppuun.

    Syy siihen, että hakukohteet ovat muita laajempia, johtuu siitä, että syöttökentät ovat oletusarvoisesti arvoja size="20", joita eri selaimet ja käyttöjärjestelmät tulkitsevat eri tavoin.

    Reagointikyky # 1

    Antaaksemme navigaattorillemme perustason reagoivuuden, annamme hakukohteelle joustavan arvon 1.

    .search { flex: 1; } 

    Tämä johtaa siihen, että hakukohde laajenee ja kutistuu säiliön leveyden kanssa, joten emme saa ylimääräistä tilaa oikealta puolelta.

    Vaikka on järkevää saada hakukohde kasvamaan, kun taas muut pysyvät kiinteinä, voit väittää, että siitä voi tulla liian leveä muihin verrattuna. Joten jos haluat, että kaikki kohteet kasvavat sen sijaan säilön leveyden kanssa, voit antaa kaikille kohteille flexarvon 1.

    .container > li { flex: 1; } 

    Näin se toimii:

    Voit antaa kohteille myös erilaiset joustavuusarvot, mikä saisi ne kasvamaan eri nopeuksilla. Voit vapaasti kokeilla sitä tässä Scrimban leikkikentällä.

    Loput opetusohjelmasta jatkamme ensimmäisen ratkaisun kanssa, jossa vain hakukohteet ovat flexarvoisia.

    Reagointikyky # 2

    Navigointipalkkimme toimii hyvin leveillä näytöillä. Kapeammilla se joutuu kuitenkin ongelmiin, kuten näette täällä:

    Jossain vaiheessa ei ole kannattavaa, että kaikki tuotteet ovat samalla rivillä, koska säilö muuttuu liian kapeaksi. Tämän ratkaisemiseksi lisäämme mediakyselyn, jossa jaamme neljä kohdetta kahteen riviin. Mediakysely käynnistyy, kun näyttö on 600 kuvapistettä leveä:

    @media all and (max-width: 600px) { .container { flex-wrap: wrap; } .container > li { flex-basis: 50%; } } 

    Ensinnäkin annamme Flexbox-asettelun kietoutua flex-wrap. Tämä on oletusarvoisesti nowrap, joten meidän on muutettava se muotoon wrap.

    Seuraava asia, jonka teemme, asettaa kohteiden flex-basisarvoksi 50%. Tämä käskee Flexboxia tekemään jokaisen kohteen viemään 50% käytettävissä olevasta leveydestä, mikä johtaa kahteen kappaleeseen riviä kohden seuraavasti:

    Huomaa: Olen keskittänyt paikkamerkkitekstin myös hakukenttään.

    Huomaa: Olen keskittänyt paikkamerkkitekstin myös hakukenttään.

    Nyt meillä on kaksi erilaista tilaa. Tämä asettelu ei kuitenkaan vieläkään toimi hyvin pienillä näytöillä, kuten pystytilassa olevat mobiilinäytöt.

    Jos jatkamme näytön kutistamista, se on kuin alla oleva kuva.

    Tässä tapahtui, että toinen rivi ei enää sovi kahteen kohteeseen.

    Uloskirjautuminen ja hakukohteet ovat yksinkertaisesti liian leveitä, koska et voi kutistaa niitä alas niiden vähimmäisleveyden alle, joka on leveys, jota he tarvitsevat täyttääkseen niiden sisällön.

    Koti- ja profiilikohteet voivat silti näkyä samalla rivillä, joten Flexbox antaa heille mahdollisuuden tehdä niin. Tämä ei ole optimaalinen, koska haluamme kaikkien riviemme käyttäytyvän samalla tavalla.

    Reagointikyky # 3

    Joten heti kun yksi riveistä ei mahdu kahteen kohteeseen leveydelle, haluamme, ettei yhdelläkään rivillä ole kahta kohdetta leveydellä. Toisin sanoen, hyvin pienillä näytöillä me todella teemme navbar-pystysuoran. Pinoamme tavarat päällekkäin.

    Tämän saavuttamiseksi meidän on vain muutettava 50%: n leveys 100%: ksi, jotta jokainen rivi mahtuu vain yhteen tuotteeseen. Lisäämme tämän katkaisupisteen 400 kuvapisteeseen.

    @media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } } 

    Tämän lisäksi haluaisin sijoittaa haun kohteen alaosaan, minkä vuoksi kohdistan myös haun ja annan sille orderarvon 1.

    Tuloksena on seuraava:

    Syynä order: 1;siihen, että hakukohde sijoitetaan alareunaan, johtuu siitä, että joustavien kohteiden arvo on oletusarvoisesti nolla, ja minkä tahansa kohteen arvo on suurempi kuin se, joka sijoitetaan muiden jälkeen.

    Tässä on gif artikkelin yläosasta, jotta näet kuinka kaikki toimii.

    Onnittelut! Tiedät nyt, kuinka luoda täysin reagoiva navigaattori Flexbox- ja mediakyselyjen avulla.

    Jos haluat oppia lisää Flexboxista, suosittelen sinua tutustumaan ilmaiseen kurssini Scrimba.

    Kiitos lukemisesta! Nimeni on Per Borgen, olen Scrimban perustaja - helpoin tapa oppia koodaamaan. Sinun kannattaa tutustua reagoivaan verkkosuunnittelun käynnistyskampaan, jos haluat oppia rakentamaan modernia verkkosivustoa ammattitasolla.