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å.

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.

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!

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.

Satans froskefaen!