Flexduck was created to teach new front-end developers of how to utilize the css layout model, flexbox. With this game, we will teach you the flexbox directions through justify content, align items and flex-direction
Rules
To play this game you need to move the ducky to the red square.
To move you will have same number of squares each turn which will start in the top left corner.
You need to connect the new sqaures with the end of your last square by typing flexbox commmands into the input to move the squares in the correct direction and end on the red square.
Each move, you will be putting down the bridges on a new z-index so don't worry about the previous bridges placed!
Bridge number will always have to start where the ducky is currently in.
You can preview changes as you type the flexbox information.
What to use
For flex-direction you will use this property to aim your ducky in the right direction! You can use the 2 directions.
More info
For justify-content you use this property to align the items on the main axis. If you are using flex-direction: row your main axis is horizontal. Else you would be usingflex-direction: column, therefore your main axis would be vertical.
More Info
For align-items you use this property to align the items on the secondary axis. If you are using flex-direction: row your secondary axis is vertical. Else you would be usingflex-direction: column, therefore your secondary axis would be horizontal.
More Info
Create the bridge necessary to get the duck to the end!