Flexbox oktatóanyag: Tanuljon meg egy érzékeny navigációs sávot kódolni a CSS Flexbox segítségével

Ebben a cikkben elmagyarázom, hogyan hozhatunk létre olyan navigációs sávot, amely alkalmazkodik a különböző képernyőméretekhez a Flexbox és a média lekérdezések segítségével.

Ez az oktatóanyag interaktív képernyőként is megtalálható a Scrimba ingyenes Flexbox tanfolyamomon.

Ha többet szeretne megtudni a kurzusról, olvassa el ezt a cikket.

A beállítás

Kezdjük egy nagyon egyszerű navigációs sáv jelölésével:


    
     Home
     Profile
     
     Logout

az elemek a flex tárgyaink. Hogy ezt Flexbox elrendezéssé alakítsuk, megtesszük:
```
.container { display: flex; } 
```
A következő elrendezést eredményezi:
Hozzáadtam néhány stílust, de ennek semmi köze a Flexboxhoz.
Mint látható, van egy kis extra helyünk a jobb oldalon. A Flexbox ugyanis balról jobbra haladó elemeket helyez el, és minden elem csak olyan széles, amennyire tartalma arra kényszeríti.
Mivel a flex konténer alapértelmezés szerint blokk szintű elem (és szélesebb, mint a négy elem), a végén kapjuk a rést.
A keresési elemek szélesebbek, mint a többi, azért van, mert a beviteli mezők alapértelmezés szerint az értékre vannak állítva size="20", amelyet a különböző böngészők és operációs rendszerek különböző módon értelmeznek.
1. válaszkészség
A navigációs sáv alapvető reagálóképességének megadásához egyszerűen megadjuk a keresési elemnek az 1 flex értéket.
```
.search { flex: 1; } 
```
Ennek eredményeként a keresési elem a tároló szélességével bővül és zsugorodik, vagyis a jobb oldalon nem kapunk extra helyet.
Bár van értelme, hogy a keresési elem növekedjen, míg a többiek fixen maradjanak, azt állíthatja, hogy túl széles lehet a többihez képest. Tehát, ha azt szeretné, hogy az összes elem növekedjen a tároló szélességével, akkor egyszerűen minden elemnek 1 flexértéket adhat .
```
.container > li { flex: 1; } 
```
Így játszódik ez:
Különböző flex értékeket is adhat az elemeknek, ami különböző sebességgel növekedhet. Bátran kísérletezzen ezzel a Scrimba játszótéren.
Az oktatóanyag további részében folytatjuk az első megoldást, ahol csak a keresési elemek rendelkeznek flexértékkel.
2. válaszkészség
A navigációs sávunk jól működik széles képernyőkön. Szűkebbeknél azonban problémákba ütközik, amint itt láthatja:
Egy ponton nem életképes, ha minden elem ugyanazon a soron van, mivel a tároló túl keskeny lesz. Ennek megoldására adunk hozzá egy média lekérdezést, ahol négy elemünket két sorra osztjuk. A média lekérdezés akkor indul, amikor a képernyő 600 képpont széles:
```
@media all and (max-width: 600px) { .container { flex-wrap: wrap; } .container > li { flex-basis: 50%; } } 
```
Először hagyjuk, hogy a Flexbox elrendezés beburkoljon flex-wrap. Ez alapértelmezés szerint beállítva nowrap, így kénytelenek leszünk változtatni, hogy wrap.
A következő lépésként az elemek flex-basisértékét 50% -ra állítjuk . Ez azt mondja a Flexboxnak, hogy minden elem töltse ki a rendelkezésre álló szélesség 50% -át, ami soronként két elemet eredményez, így:
Megjegyzés: A helyőrző szöveget a keresési beviteli mezőbe is központosítottam.
Most két különböző állapotunk van. Ez az elrendezés azonban még mindig nem működik nagyon kicsi képernyőkön, például álló módban a mobil képernyőkön.
Ha tovább zsugorítjuk a képernyőt, akkor az olyan lesz, mint az alábbi kép.
Itt az történt, hogy a második sorba már nem fér el két elem.
A kijelentkezés és a keresési elemek egyszerűen túl szélesek, mivel nem lehet azokat a minimális szélességük alá csökkenteni, vagyis arra a szélességre, amelyre szükségük van a bennük lévő tartalom kitöltéséhez.
Az otthoni és a profilelemek azonban továbbra is ugyanazon a soron jelenhetnek meg, így a Flexbox lehetővé teszi számukra, hogy ezt megtegyék. Ez nem optimális, mivel azt akarjuk, hogy minden sorunk ugyanúgy viselkedjen.
3. válaszkészség
Tehát amint az egyik sor nem fér el két elem szélességében, azt akarjuk, hogy egyik sorban sem legyen két elem szélességű. Más szavakkal, nagyon kicsi képernyőkön a navigációs sávot függőlegessé tesszük. Az elemeket egymásra rakjuk.
Ennek eléréséhez egyszerűen meg kell változtatnunk az 50% -os szélességet 100% -ra úgy, hogy minden sor csak egyetlen elemnek feleljen meg. Ezt a töréspontot hozzáadjuk 400 képpontnál.
```
@media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } } 
```
Ezen felül szeretném alul elhelyezni a keresési tételt, ezért is célzom a keresést és order1-es értéket adok neki .
Ez a következőket eredményezi:
Ennek oka order: 1;, hogy a keresési elem alul helyezkedik el, az az, hogy a flex elemeknek alapértelmezés szerint nulla az értéke, és bármely elemnek magasabb az értéke, mint amennyi a többi után kerül.
Hogy lássa, hogyan játszódik le az egész, íme a gif a cikk tetejéről:
Gratula! Most már tudja, hogyan hozhat létre teljesen reagáló navigációs sávot a Flexbox és a média lekérdezések segítségével.
Ha többet szeretne megtudni a Flexboxról, javasoljuk, hogy nézze meg az ingyenes tanfolyamomat a Scrimba-ban.
Köszönöm, hogy elolvasta! A nevem Per Borgen, a Scrimba társalapítója vagyok - ez a legegyszerűbb módja a kódolás megtanulásának. Tekintse meg adaptív webdesign bootcampunkat, ha meg akarja tanulni a modern weboldal professzionális felépítését.

A beállítás

1. válaszkészség

2. válaszkészség

3. válaszkészség