Kuidas luua Flexboxiga täielikult reageeriv navigeerimisriba

Üks navigatsiooniriba, kolm erinevat paigutust.

Selles artiklis selgitan, kuidas luua Flexboxi ja meediumipäringute abil mitmesugustele ekraanisuurustele kohandatav navigeerimisriba.

Selle õpetuse võib leida ka interaktiivse ekraaniprogrammina minu tasuta Flexboxi kursusel Scrimbas.

Kursuse kohta lisateabe saamiseks lugege seda artiklit.

Seadistamine

Alustame väga lihtsa navigatsiooniriba märgistusega:

Element

    on meie painduv konteiner ja
  • elemendid on meie painduvad esemed. Selle muutmiseks Flexboxi paigutuseks teeme järgmist:

    .konteiner {
      kuva: flex;
    }

    Selle tulemuseks on järgmine paigutus:

    Lisasin veidi stiili, kuid sellel pole Flexboxiga mingit pistmist.

    Nagu näete, on meil paremal küljel natuke lisaruumi. Selle põhjuseks on asjaolu, et Flexbox paneb paika vasakult paremale ulatuvad elemendid ja iga üksus on ainult nii lai, kui selle sisu sunnib seda olema.

    Kuna paindmahuti on vaikimisi ploki tasemel element (ja on laiem kui neli eset), saame tühiku lõpus.

    Otsitavad üksused on teistest laiemad seetõttu, et sisestusväljad on vaikimisi seatud suurusele = "20", mida erinevad brauserid ja opsüsteemid tõlgendavad erineval viisil.

    Vastuvõtlikkus nr 1

    Oma navigatsiooniriba põhilise reageerimisvõime andmiseks anname otsinguelemendile lihtsalt paindeväärtuse 1.

    .otsing {
      flex: 1;
    }

    Selle tulemuseks on see, et otsinguelement laieneb ja kahaneb konteineri laiusega, mis tähendab, et paremas servas ei ole meil lisaruumi.

    Ehkki otsinguelemendi suurendamine on mõttekas, kuni teised püsivad, võite väita, et see võib teistega võrreldes liiga laiaks muutuda. Nii et kui eelistate, et kõik esemed kasvaksid selle asemel konteineri laiusega, saate lihtsalt anda kõigile üksustele paindväärtuse 1.

    .konteiner> li {
      flex: 1;
    }

    See toimib järgmiselt:

    Samuti saate üksustele anda erinevad paindeväärtused, mis paneksid neid erineva kiirusega kasvama. Proovige seda Scrimba mänguväljakul julgelt teha.

    Ülejäänud õpetuse osas jätkame esimese lahendusega, kus otsinguelemendid on ainsad, millel on paindlik väärtus.

    Vastuvõtlikkus nr 2

    Meie navigeerimisriba töötab hästi laiekraanidel. Kuid kitsamatel lasub see probleemidele, nagu näete siit:

    Mõnel hetkel ei ole elujõuline, kui kõik üksused asuvad samal real, kuna konteiner muutub liiga kitsaks. Selle lahendamiseks lisame meediumipäringu, kus jagame neli eset kaheks reaks. Meediumipäring käivitub, kui ekraan on 600 pikslit lai:

    @media kõik ja (maksimaalne laius: 600 pikslit) {
      
      .konteiner {
        flex-wrap: mähis;
      }
      
      .konteiner> li {
        paindlik alus: 50%;
      }
    }

    Esmalt lubame Flexboxi paigutusel mähkida elastse mähisega. Vaikimisi on see seatud nüüd, seega peame selle ümber märama.

    Järgmine asi, mida me teeme, seadis üksuste paindliku väärtuse väärtuseks 50%. See käsib Flexboxil panna iga toode võtma 50% saadaolevast laiusest, mille tulemuseks on kaks elementi reas, näiteks:

    Märkus. Olen ka kohahoidja teksti tsentreerinud otsingu sisestusväljale.

    Nüüd on meil kaks erinevat osariiki. Kuid see paigutus ei toimi endiselt väga väikestel ekraanidel, näiteks mobiiliekraanidel portreerežiimis.

    Kui jätkame ekraani kokkutõmbumist, on see selline, nagu alloleval pildil.

    Siin juhtus see, et teine ​​rida ei mahu enam kahele üksusele.

    Väljalogimine ja otsinguelemendid on lihtsalt liiga laiad, kuna te ei saa neid kahandada allapoole nende miinimumlaiust, mis on nende sisese sisu täitmiseks vajalik laius.

    Kodu- ja profiilielemendid võivad siiski ilmuda samal real, nii et Flexbox lubab neil seda teha. See pole optimaalne, kuna soovime, et kõik meie read käituksid ühtemoodi.

    Vastuvõtlikkus nr 3

    Nii et niipea, kui üks ridadest ei mahu kahte elementi laiusesse, tahame, et ühelgi real ei oleks laiuses kahte elementi. Teisisõnu, väga väikestel ekraanidel muudame navigatsiooniriba vertikaalseks. Korstnad asetame üksteise peale.

    Selle saavutamiseks peame lihtsalt muutma oma 50% laiuse 100% -ni, nii et iga rida sobib ainult ühele üksusele. Lisame selle murdepunkti 400 pikslil.

    @media kõik ja (maksimaalne laius: 400 pikslit) {
      .konteiner> li {
        paindlik alus: 100%;
      }
      .otsing {
        järjekord: 1;
      }
    }

    Lisaks sellele sooviksin paigutada otsinguelemendi alumisse ossa, mistõttu sihtin ka otsingut ja annan sellele tellimisväärtuse 1.

    Selle tulemuseks on järgmine:

    Põhjuste järjekord: 1; tulemuseks on see, et otsinguelement paigutatakse alaosasse, kuna paindlike üksuste väärtus on vaikimisi null ja ükskõik millise üksuse väärtus on suurem kui see, mis asetatakse teiste järel.

    Siin on artikli ülaosas olev gif, et näha, kuidas see kõik välja mängib:

    Palju õnne! Nüüd teate, kuidas luua Flexboxi ja meediumipäringute abil täielikult reageeriv navigatsiooniriba.

    Kui olete huvitatud Flexboxi kohta rohkem teada saama, soovitaksin teil tutvuda minu tasuta kursusega Scrimbas.

    Minu tasuta Flexboxi kursusele pääsemiseks klõpsake sellel pildil.

    Täname, et lugesite! Minu nimi on Per, olen Scrimba kaasasutaja ja armastan aidata inimestel uusi oskusi õppida. Jälgige mind Twitteris, kui soovite saada teavitust uute artiklite ja ressursside kohta.