Layoutmönster
Flexbox och media queries: från staplade lådor till levande layout.
0% klart · 5 frågor
Nu kan du lådorna. Men en webbsida där lådorna bara staplas på varandra, uppifrån och ned, är inget gränssnitt, det är ett dokument. En riktig layout placerar lådorna i förhållande till varandra: en meny på rad, ett sidofält bredvid innehållet, tre kort sida vid sida som blir en kolumn på mobilen.
I det här området lär du dig verktygen som gör det. Flexbox har hittills varit receptkod du litat på, nu blir den din: du lär dig fördela utrymme längs en axel och förstå varför recepten fungerar. Media queries låter sidan byta form efter skärmen i stället för att gå sönder på den. Området avslutas med en laboration där du tränar tills axlarna sitter i muskelminnet.
- 1 Flexbox Tämj den linjära layouten. Flex-containers, axlar och hur du centrerar element utan panik.
- 2 Media queries Gör layouten responsiv med @media-regler: lär dig mobile-first, välj brytpunkter efter innehåll och se reglerna aktiveras live i DevTools.
- 3 Laboration: Flexbox i praktiken Träna Flexbox och responsivitet med tutorials, spel och guider.