Flexbox Froggy: Oakk-akk-akk hvorfor er CSS så vanskelig?

Dette blir et litt annerledes innlegg. For Flexbox Froggy er ikke så mye spill som det er spillifisert læring. Jeg er web-programmerer av yrke, og å holde seg oppdatert er en del av jobben. Da CSS har vært en av mine svakheter i lengre tid har jeg vært på søken etter en måte å utbedre dette på. Heldigvis kunne en kjær kollega tipse meg om en litt annerledes måte å lære på.

Skjermbilde av Flexbox Froggy.
På den venstre siden står hint og oppgaven man skal løse, samt en liten kodeeditor.

På den høyre siden vises en vanndamm med en frosk og en vannlilje. Frosken sitter langt unna liljen sin.

I Flexbox Froggy er målet enkelt: Man skal lede én eller flere frosker til vannliljene sine. Froskene er fargekoordinert, og liljene likeså. Ved hjelp av egenskapene “justify-content”, “align-items”, “flex-direction”, “order”, “align-self”, “flex-wrap”, “flex-flow”, og “align-content” kan man manipulere hvordan froskene blir fordelt utover siden. Hver av de påvirker fordelingen på sin egne måte. Justify-content, for eksempel, bestemmer hvor et element skal plasseres horisontalt.

En kodeeditor hvor elementet "pond" har egenskapene "display: flex" og "justify-content: center".
Vanndammen fra tidligere. Frosken er nå halvveis til liljen sin.

Om jeg nå skriver inn “justify-content: center” kommer frosken til å plasseres midt i den blå firkanten til høyre. Det er derimot ikke helt hvor vi vil ha den. Da må “justify-content: flex-end” til!

En kodeeditor hvor elementet "pond" har egenskapene "display: flex" og "justify-content: flex-end".
Vanndammen. Frosken sitter nå trygt og godt på liljen sin.

Etter hvert blir ting mer komplekse dog! For de ulike egenskapene påvirker også hverandre. Snur man fordelingen av froskene på hodet slik at de dukker opp på bunnen av boksen, må man også begynne å tenke opp-ned. Da er det nemlig den nederst som tells som nummer én, og ikke den lengst opp! Det samme er også tilfellet om froskene skal snus om på den horisontale aksen. 

Er du interessert i web-programmering så anbefaler jeg deg på det varmeste å prøve dette minispillet. Du får en enkel innføring i CSS-flex, og attpåtil får du se på søte frosker mens du irriterer deg over at de ikke befinner seg på riktig sted. Minispillet finner du her.

En ny vanndamm. Vannliljene befinner seg i en kolonne nede i venstre hjørne. Rekkefølgen er, fra øverst til nederst: Grønn, gul, rød.

Tre frosker befinner seg på liljene, men i feil rekkefølge. Den er som følger: Rød, gul, grønn.

Satans froskefaen!

Del den med venner og kjente!
Share on twitter
Twitter
Share on telegram
Telegram
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on email
Epost
Når vi først har deg her, hvorfor ikke lese en av våre andre artikler?

Velkommen til Spillbart — Hvor kvaliteten, hverken det tekniske rundt siden eller de anmeldelsene vi har publisert så langt, er så veldig høy.

Hovedmeny