CSS Gamification: Flexbox Froggy
Tags: frontend, css3, cssflexbox, beginners
Published: 2020-09-15 12:10:03

---
title: CSS Gamification: Flexbox Froggy
published: true
date: 2020-09-15 11:22:16 UTC
tags: frontend,CSS3,cssflexbox,beginner
canonical_url: https://sabarish.hashnode.dev/css-gamification-flexbox-froggy
---

As a developer who works predominantly on the backend, I have always found myself taking more time trying to use the right CSS properties, to get the right kind of style for my website or my application. 

Especially *aligning elements correctly and spacing them*. 
Oh boy, that was tough !! At least for me.
## *Enter Flexbox*
So, I fired up Chrome and browsed through several articles which gave me an idea of how to use flexbox in my CSS.  And I discovered this game where you are able to learn flexbox by practically trying it out right away. 

# [FlexBox Froggy](https://flexboxfroggy.com/) 
![flexbox_froggy_level1](https://cdn.hashnode.com/res/hashnode/image/upload/v1600159156632/madqTw_0r.png)

So, this game, developed by [CodePiP](https://codepip.com/), is free to play, and really helpful if you want to try out flexbox. You might need to have the knowledge of basic CSS, and need not even know or understand flexbox before. You don't even need to create an account to play it either.

![gametime](https://media.giphy.com/media/VFXxMWpzq4kz9M5SUh/giphy.gif)
The game involves 24 levels, where you have to help Froggy, the frog, and his friends to reach the lilypads placed around them.
The difficulty increases as we progress through the levels.

There are three difficulty levels:-

1. Beginner - Tips and directions are displayed
2. Intermediate - Tips and directions are disabled, but the difficulty increases as you progress through consecutive levels.
3. Expert - Random levels and no tips are displayed.

If you're a person who is already familiar with flexbox and just wants to try out the game, try the Intermediate or Advanced level.

It was really fun as I made progress through the levels. 
Before I tell you about what all I was able to learn from the game, Here's an image from MDN docs to help give you an understanding of the flex container and the axes.

![flexbox-axes](https://developer.mozilla.org/files/3739/flex_terms.png)
Each of the properties mentioned below take values to position your elements according to your need.
- `justify-content`: Aligns elements across the `main axis`, i.e horizontally.
- `align-items`: Aligns elements across the `cross-axis`, i.e vertically.
- `flex-direction`: Defines the direction of the `main axis`.

**Quick Note**:  When the `flex-direction` property takes the value as `column`, `justify-content` and `align-items` change their axes with each other. If you play through the game, it occurs on Level 11.
- `flex-wrap`: Takes the child elements to additional lines when they overflow
- `flex-flow`: A shorthand property for both `flex-direction` and `flex-wrap`
- `align-content`: Determines the spacing between the lines. It has no effect if there is only one line. Level 21 helps us understand this

As a beginner, I found it very useful to learn flexbox. Do try out the game and let me know in the comments how it turned out for you 💜

---
 References :  [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)