Laboration: Flexbox i praktiken

Lådor i lådor

Du har skissat layouter och du har koll på boxmodellen. Nu ska vi göra layouten flytande. Flexbox är branschens verktyg för att arrangera innehåll i rader eller kolumner, en smart föräldralåda som styr hur de mindre barnlådorna inuti fördelar utrymmet.

Galleriet är inlämnat och nästa moment är ett skarpt prov på tid. Däremellan ligger det här: du väljer själv hur du vill träna, arbetar igenom guider och dokumenterar din resa.

Din verktygslåda: Välj din tutorial

Välj minst två källor, gärna ett spel och en interaktiv guide, och arbeta igenom dem.

Spel och gamification

• Flexbox Froggy (Svenska): Klassikern. Rädda grodorna på 30 minuter.
• Flexbox Defense: Tower defense med CSS-positionering.
• Flexbox Zombies: Story-driven träning (kräver gratis konto).

Interaktiva guider och referenser

• Josh W. Comeau: Interactive Guide to Flexbox: Världens bästa visuella förklaring av Flexbox-axlarna.
• CSS-Tricks: A Complete Guide to Flexbox: Branschens fusklapp. Ha den öppen i ett sidfönster när du kodar.
• Kevin Powell (YouTube): Tydliga videogenomgångar av flexbox och CSS. Guld när något inte vill sätta sig.

Pröva i DevTools: Syna dina media queries

Öppna DevTools (F12) och klicka på mobil-ikonen (Toggle device toolbar).

1. Dra i sidans kant för att göra skärmen smalare och bredare.
2. Titta i fliken Styles till höger. När skärmen passerar din brytpunkt (t.ex. 48rem) ser du hur din @media-regel tänds och dina vanliga CSS-regler stryks över.
3. Webbläsaren visar exakt när villkoret uppfylls, ingen gissning.

Dokumentera din väg

Skapa en fil tutorials.md i galleriets repo och skriv en kort, ärlig recension av varje guide du använde:

• Vad var bra och vad var mindre bra?
• Vad var din största aha-upplevelse?
• Vilket betyg (1-5) ger du guiden och varför?

Det är inte en inlämning. Det är för att du ska minnas vilken guide som faktiskt hjälpte dig nästa gång du fastnar, och för att en ärlig recension tvingar dig att sätta ord på vad du lärde dig.