Kuinka luoda täysin reagoiva navigointipalkki Flexboxilla

Yksi navigointipalkki, kolme eri asettelua.

Selitän tässä artikkelissa, kuinka luodaan navigointipalkki, joka mukautuu eri näytön kokoihin käyttämällä Flexboxia mediakyselyjen kanssa.

Tämä opetusohjelma löytyy myös interaktiivisena näytönohjauksena ilmaisessa Flexbox-kurssissani Scrimbassa.

Lue lisää kurssista, katso tämä artikkeli.

Asennus

Aloitetaan erittäin yksinkertaisen navigointipalkin merkinnöillä:

    -elementti on flex-kontti ja
  • elementit ovat flex-esineitämme. Muutamme sen Flexbox-asetteluksi:

    .container {
      näyttö: flex;
    }

    Mistä seuraa seuraava asettelu:

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

    Kuten huomaat, meillä on hiukan ylimääräistä tilaa oikealla puolella. Tämä johtuu siitä, että Flexbox asettaa tuotteet vasemmalta oikealle ja jokainen esine on vain niin leveä, että sen sisältö pakottaa sen olevan.

    Koska flex-säiliö on oletuksena lohkotason elementti (ja on leveämpi kuin neljä kohdetta), saadaan aukko loppuun.

    Syy, jonka perusteella hakukentät ovat muita laajemmat, johtuu siitä, että syöttökenttien oletusasetuksena on = = 20, joita eri selaimet ja käyttöjärjestelmät tulkitsevat eri tavoin.

    Vastuullisuus # 1

    Antaaksesi navbar-palkin perusvasteen, annamme hakutermille yksinkertaisesti joustavuusarvon 1.

    .Hae {
      taipu: 1;
    }

    Tämä johtaa siihen, että hakutermi laajenee ja kutistuu säilön leveyden myötä, eli emme saa ylimääräistä tilaa oikealle puolelle.

    Vaikka onkin järkevää, että hakukohde kasvaa, kun muut pysyvät kiinteinä, voit väittää, että siitä voi tulla liian leveä muihin verrattuna. Joten jos haluat, että kaikki esineet kasvavat säiliön leveyden sijaan, voit antaa kaikille kohteille joustavuusarvon 1.

    .kontti> li {
      taipu: 1;
    }

    Näin se toimii:

    Voit myös antaa kohteille erilaisia ​​flex-arvoja, mikä saa ne kasvamaan eri nopeuksilla. Voit vapaasti kokeilla tätä Scrimban leikkikentällä.

    Jatkamme lopun opetusohjelman kanssa ensimmäisestä ratkaisusta, jossa hakutermillä on ainoa joustoarvo.

    Vastuullisuus # 2

    Navigointipalkki toimii hyvin laajoissa näytöissä. Kapeammissakin se kuitenkin joutuu ongelmiin, kuten näet täältä:

    Jossain vaiheessa ei ole kannattavaa, että kaikki tuotteet ovat samalla rivillä, koska säilö tulee liian kapeaksi. Tämän ratkaisemiseksi lisäämme mediakyselyn, jossa jaamme neljä esineemme kahteen riviin. Mediakysely alkaa, kun näytön leveys on 600 kuvapistettä:

    @media kaikki ja (enimmäisleveys: 600 kuvapistettä) {
      
      .container {
        flex-wrap: kääri;
      }
      
      .kontti> li {
        flex-perusta: 50%;
      }
    }

    Ensin annamme Flexbox-asettelun kääriä flex-wrapilla. Tämä on oletusasetuksena nyt asetettu, joten meidän on vaihdettava se kääriä.

    Seuraava asia, jonka teemme, asetti esineiden joustavuusarvon 50%: iin. Tämä käskee Flexboxia saamaan jokaisen esineen käyttämään 50% käytettävissä olevasta leveydestä, mistä seuraa kaksi tuotetta riviä kohti, kuten tämä:

    Huomaa: Olen myös keskittänyt paikkamerkkitekstin hakusyöttökenttään.

    Nyt meillä on kaksi eri valtiota. Tämä asettelu ei kuitenkaan vieläkään toimi hyvin pienillä näytöillä, kuten mobiililaitteiden näytöt muotokuvaustilassa.

    Jos jatkamme näytön kutistumista, se loppuu kuten alla oleva kuva.

    Tässä tapahtui, että toinen rivi ei mahtu enää kahteen esineeseen.

    Uloskirjautuminen ja hakuelementit ovat yksinkertaisesti liian leveitä, koska et voi kutistaa niitä pienimmän leveyden alapuolelle, joka on leveys, jota he tarvitsevat täyttääkseen sisällön.

    Koti- ja profiilikohteet voivat silti esiintyä samalla rivillä, joten Flexbox antaa heidän tehdä niin. Tämä ei ole optimaalista, koska haluamme kaikkien riveidemme käyttäytyvän samalla tavalla.

    Vastuullisuus # 3

    Joten heti kun yksi riveistä ei sovi kahteen kohtaan leveyteen, emme halua, että yhdelläkään riveistä olisi kaksi tuotetta leveydessä. Toisin sanoen, pienillä näytöillä teemme navigointipalkin pystysuoraan. Pinoamme tuotteet päällekkäin.

    Tämän saavuttamiseksi meidän on vain vaihdettava 50% leveydemme 100%: iin, jotta jokainen rivi sopii vain yhteen tuotteeseen. Lisäämme tämän raja-arvon 400px.

    @media kaikki ja (enimmäisleveys: 400 kuvapistettä) {
      .kontti> li {
        flex-pohja: 100%;
      }
      .Hae {
        järjestys: 1;
      }
    }

    Tämän lisäksi haluaisin sijoittaa hakuelementin alaosaan, minkä vuoksi kohdistan myös hakuun ja annan sille tilausarvon 1.

    Tämä johtaa seuraaviin:

    Syyn järjestys: 1; tulokset hakutoiminnolle asetetaan alareunaan, koska flex-kohteiden arvo on oletuksena nolla, ja millä tahansa kohteella on suurempi arvo kuin se, joka asetetaan muiden jälkeen.

    Tässä on gif artikkelin päältä nähdäksesi kuinka se kaikki soi.

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

    Jos olet kiinnostunut oppimaan lisää Flexboxista, suosittelen, että tutustu ilmaiseen kurssini Scrimbaan.

    Napsauta kuvaa päästäksesi ilmaiseksi Flexbox-kurssille.

    Kiitos lukemisesta! Nimeni on Per, olen Scrimban perustaja ja rakastan ihmisten auttamista oppimaan uusia taitoja. Seuraa minua Twitterissä, jos haluat saada ilmoituksen uusista artikkeleista ja lähteistä.