Flexbox bilan to'liq javob beradigan navbarni qanday yaratish kerak

Bitta navbar, uchta turli tartib.

Ushbu maqolada, men Flexbox-dan foydalanib, turli xil ekran o'lchamlariga moslashadigan navbarni qanday yaratishni tushuntiraman.

Ushbu qo'llanmani, shuningdek, Scrimba-dagi bepul Flexbox kursimdagi interfaol ekran tasviri sifatida topish mumkin.

Kurs haqida ko'proq ma'lumot olish uchun ushbu maqolani ko'rib chiqing.

Sozlash

Keling, juda oddiy navbar uchun belgilardan boshlaymiz:

    element bizning moslashuvchan konteynerimiz va
  • elementlari bizning moslashuvchan narsalarimizdir. Uni Flexbox tartibiga aylantirish uchun biz quyidagilarni qilamiz:

    .idish {
      displey: egiluvchan;
    }

    Natijada quyidagi tartib yaratiladi:

    Men ba'zi uslublarni qo'shdim, lekin bu Flexbox bilan hech qanday aloqasi yo'q.

    Ko'rinib turibdiki, o'ng tomondan bizda biroz ko'proq joy bor. Buning sababi, Flexbox chapdan o'ngga o'tadigan elementlarni ajratib turadi va har bir element faqat uning tarkibiga kiradigan darajada kengdir.

    Sukut bo'yicha moslashuvchan konteyner blok darajasidagi element bo'lganligi sababli (va to'rtta elementdan kengroq) biz oxirida bo'shliqni olamiz.

    Qidiruv elementlari boshqalarga qaraganda kengroq bo'lishining sababi shundaki, kirish maydonchalari hajmi = "20" ga o'rnatiladi, ularni turli xil brauzerlar va operatsion tizimlar har xil izohlashadi.

    Javobgarlik №1

    Navbar-ga asosiy e'tibor berish uchun biz shunchaki qidiruv elementiga 1 ga teng qiymatni beramiz.

    .qidirmoq {
      egiluvchanlik: 1;
    }

    Natijada, qidiruv elementi kengayib, idishning kengligi qisqarishiga olib keladi, ya'ni biz o'ng tomonda ortiqcha joy olmaymiz.

    Boshqalari sobit turganda qidirish elementi o'sishi mantiqiy bo'lsa-da, siz boshqalar bilan taqqoslaganda juda keng bo'lishi mumkin deb bahslashishingiz mumkin. Shunday qilib, agar siz hamma elementlarning o'rniga idishning kengligi bilan o'sishni xohlasangiz, unda siz barcha elementlarga 1 ga teng qiymatni berishingiz mumkin.

    .container> li {
      egiluvchanlik: 1;
    }

    Mana quyidagicha o'ynaydi:

    Bundan tashqari, siz mahsulotlarga turli xil moslashuvchan qiymatlarni berishingiz mumkin, bu ularni turli tezliklarda o'sishiga olib keladi. Ushbu Scrimba o'yin maydonchasida tajriba o'tkazishdan xursand bo'ling.

    Qolgan darslar uchun biz birinchi echimni davom ettiramiz, bu erda qidiruv elementlari moslashuvchan qiymatga ega bo'lgan yagona narsa.

    Mas'uliyat №2

    Bizning navbarimiz keng ekranlarda yaxshi ishlaydi. Ammo, tor doiralarda bu muammolarga duch keladi, bu erda ko'rib turganingizdek:

    Ba'zi bir narsalarning barchasini bir qatorga qo'yishning iloji yo'q, chunki idish juda tor bo'ladi. Buni hal qilish uchun biz to'rtta narsani ikkita qatorga ajratadigan media so'rovini qo'shamiz. Media so'rov ekranning kengligi 600px bo'lganida boshlanadi:

    barchasi @media va (eng kengligi: 600px) {
      
      .idish {
        egish-o'rash: o'rash;
      }
      
      .container> li {
        fleks-asos: 50%;
      }
    }

    Avval biz Flexbox tartibini flex-wrap bilan o'rashga ruxsat beramiz. Bu odatiy tarzda nowrap-ga o'rnatildi, shuning uchun uni o'rashga o'zgartirishimiz kerak.

    Keyingi ishimiz - narsalarning moslashuvchanligi qiymatini 50% ga sozlash. Bu Flexbox-ga har bir element mavjud kenglikning 50% tashkil qilishini aytadi, natijada bitta satrda ikkita element bo'ladi, masalan:

    Eslatma: Men shuningdek, qidirish kiritish maydonida to'ldiriladigan matnni markaziga joylashtirdim.

    Endi bizda ikki xil holat mavjud. Biroq, bu tartib hali ham kichik ekranlarda ishlamaydi, masalan portret rejimidagi mobil ekranlar.

    Agar biz ekranni kichraytirishda davom etsak, u quyidagi rasmdagi kabi yakunlanadi.

    Bu erda nima bo'ldi, ikkinchi qator endi ikkita narsaga sig'maydi.

    Chiqish va qidirish elementlari juda kengdir, chunki siz ularni eng kam kengligidan pastga siqib chiqara olmaysiz - bu ularning ichidagi tarkibni to'ldirish uchun kerak bo'lgan kenglikdir.

    Uy va profil buyumlari hanuzgacha bitta satrda ko'rinishi mumkin, shuning uchun Flexbox ularga buni amalga oshirishga imkon beradi. Bu eng maqbul emas, chunki bizning barcha qatorlarimiz bir xil harakat qilishlarini xohlaymiz.

    Javob # 3

    Shunday qilib, satrlardan biri kenglikdagi ikkita elementga sig'masa, biz satrlarning hech birida kenglikdagi ikkita element bo'lmasligini xohlaymiz. Boshqacha qilib aytadigan bo'lsak, juda kichik ekranlarda biz vertikal vertikal holga keltiramiz. Biz narsalarni bir-birining ustiga yopishtiramiz.

    Bunga erishish uchun 50% kengligimizni 100% ga o'zgartirishimiz kerak, shunda har bir satr faqat bitta elementga to'g'ri keladi. Biz bu tanaffus nuqtasini 400px da qo'shamiz.

    barchasi @media va (eng kengligi: 400px) {
      .container> li {
        fleks-asos: 100%;
      }
      .qidirmoq {
        buyurtma: 1;
      }
    }

    Bunga qo'shimcha ravishda, men qidirish ob'ektini pastki qismiga joylashtirmoqchiman, shuning uchun men qidirishni maqsad qilaman va unga buyurtma qiymatini 1 beraman.

    Bu quyidagilarga olib keladi:

    Sabab tartibi: 1; natijada qidiruv elementlari pastki qismga joylashadi, chunki moslashuvchan elementlar nolga teng qiymatga ega va har qanday element boshqalardan keyin joylashtirilganidan yuqori qiymatga ega.

    Bularning barchasi qanday amalga oshirilishini ko'rish uchun maqolaning yuqorisidagi gif:

    Tabriklaymiz! Endi siz Flexbox va media-so'rovlardan foydalangan holda to'liq javob beradigan navbarni qanday yaratishni bilasiz.

    Agar siz Flexbox haqida ko'proq bilishni xohlasangiz, Scrimba-dagi bepul kursimni tekshirishingizni maslahat beraman.

    Mening bepul Flexbox kursimga o'tish uchun rasmni bosing.

    O'qiganingiz uchun rahmat! Mening ismim Per, men Scrimba-ning asoschilariman va odamlarga yangi ko'nikmalarni o'rganishda yordam berishni yaxshi ko'raman. Agar sizga yangi maqola va manbalar haqida xabar berishni xohlasangiz, meni Tvitterda kuzatib boring.