Flexboxi õpetus: õppige tundlikku naviriba kodeerima CSS Flexboxi abil

Selles artiklis selgitan, kuidas luua Flexboxi abil meediumipäringutega navigeerimisriba, mis kohandub erinevate ekraanisuurustega.

Selle õpetuse leiate interaktiivse ekraanikuva ka minu tasuta Flexboxi kursuselt Scrimbas.

Kursuse kohta lisateabe saamiseks vaadake seda artiklit.

Seadistamine

Alustame väga lihtsa naviriba märgistusega:


    
  • Home
  • Profile
  • Logout

The

    element on meie paindlik konteiner ja
  • elemendid on meie paindlikud elemendid. Selle muutmiseks Flexboxi paigutuseks teeme järgmist.

    .container { display: flex; } 

    Selle tulemuseks on järgmine paigutus:

    Olen lisanud mõne stiili, kuid sellel pole Flexboxiga mingit pistmist.

    Olen lisanud mõne stiili, kuid sellel pole Flexboxiga mingit pistmist.

    Nagu näete, on meil paremal pool natuke lisaruumi. Seda seetõttu, et Flexbox paigutab vasakult paremale suunduvad üksused ja iga üksus on ainult nii lai, kui selle sisu sunnib olema.

    Kuna vaikimisi on paindekonteiner ploki taseme element (ja on laiem kui neli elementi), saame lõhe lõpuks.

    Otsinguüksused on teistest laiemad põhjusel, et sisendväljad on vaikimisi seatud väärtusele size="20", mida erinevad brauserid ja operatsioonisüsteemid tõlgendavad erinevalt.

    Reageerimisvõime nr 1

    Meie navbarile põhilise reageerimisvõime andmiseks anname otsinguüksusele lihtsalt paindväärtuse 1.

    .search { flex: 1; } 

    Selle tulemusel laieneb ja kahaneb koos konteineri laiusega otsinguüksus, mis tähendab, et me ei saa parempoolses osas lisaruumi.

    Ehkki on otstarbekas lasta otsinguelement kasvada, samal ajal kui teised püsivad paigal, võiksite väita, et see võib teistega võrreldes liiga laieks muutuda. Nii et kui eelistate, et kõik üksused kasvaksid koos konteineri laiusega, võite lihtsalt anda kõigile üksustele flexväärtuse 1.

    .container > li { flex: 1; } 

    See mängib välja nii:

    Samuti saate anda üksustele erinevad paindeväärtused, mis paneks neid erineva kiirusega kasvama. Selles Scrimba mänguväljakul võite julgelt katsetada.

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

    Reageerimisvõime nr 2

    Meie navbar töötab hästi laiekraanidel. Kuid kitsamate puhul satub see probleemidesse, nagu näete siin:

    Mingil hetkel ei ole otstarbekas kõiki üksusi samal real hoida, kuna konteiner muutub liiga kitsaks. Selle lahendamiseks lisame meediumipäringu, kus jagame oma neli üksust kahte ritta. Meediapäring algab siis, kui ekraan on 600 pikslit lai:

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

    Esiteks lubame Flexboxi paigutusega mähkida flex-wrap. See on vaikimisi määratud nowrap, nii et peame selle muutma wrap.

    Järgmine asi, mida me teeme, määras üksuste flex-basisväärtuseks 50%. See käsib Flexboxil lasta igal üksusel võtta 50% saadaolevast laiusest, mille tulemuseks on kaks rida järgmiselt:

    Märkus. Olen paigutanud kohatäite teksti ka otsingu sisestusväljale.

    Märkus. Olen paigutanud kohatäite teksti ka otsingu sisestusväljale.

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

    Kui jätkame ekraani kahandamist, on see lõpuks nagu allpool olev pilt.

    Siin juhtus see, et teine ​​rida ei mahuta enam kahte eset.

    Väljalogimine ja otsitavad üksused on lihtsalt liiga laiad, kuna te ei saa neid kokku tõmmata alla nende minimaalse laiuse, mis on laius, mida nad vajavad, et nende sisu täita.

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

    Reageerimisvõime # 3

    Niipea kui üks rida ei mahu kahele üksusele laiuses, soovime, et ühelgi real ei oleks kahte üksust laiuses. Teisisõnu, väga väikestel ekraanidel muudame naviriba tegelikult vertikaalseks. Paneme üksused üksteise otsa.

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

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

    Lisaks sellele tahaksin asetada otsinguüksuse allserva, mistõttu sihin ka otsingut ja annan sellele orderväärtuse 1.

    Selle tulemuseks on järgmine:

    Põhjus on order: 1;see, et otsitav üksus asetatakse alaossa seetõttu, et painduvate üksuste väärtus on vaikimisi null ja mis tahes üksuse väärtus on suurem kui see, mis asetatakse teiste järele.

    Et näha, kuidas see kõik mängib, on siin artikli ülaosas gif:

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

    Kui olete huvitatud Flexboxi kohta lisateabe saamisest, soovitaksin teil tutvuda minu tasuta kursusega Scrimbas.

    Täname lugemast! Minu nimi on Per Borgen, olen Scrimba asutaja - lihtsaim viis kodeerimise õppimiseks. Kui soovite õppida kaasaegse veebisaidi loomist professionaalsel tasemel, peaksite tutvuma meie reageeriva veebidisaini alglaadimisega.