Knights of the Flexbox Table

Let the bard play the music

Speed up your workflow with Windy, the browser extension that transforms any HTML element into a Tailwind CSS component.
Save 10% using the coupon code I-AM-A-KNIGHT.

Good day, my lord.
Welcome to the Knights of the Flexbox table. A game where you can help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the Tailwind CSS dungeons.
You can navigate the knight through the dungeon by changing his position within the dungeon using Flexbox and Tailwind CSS.

Use justify-start to justify items against the start of the container’s main axis.
Use justify-center to justify items along the center of the container’s main axis.
Use justify-end to justify items against the end of the container’s main axis.
Use justify-between to justify items along the container’s main axis such that there is an equal amount of space between each item.
Use justify-around to justify items along the container’s main axis such that there is an equal amount of space on each side of each item.

Give it a try by typing justify-end into the input below.

1
2
3
4
5
6
7
8
9
10
<div id="dungeon" class="flex ></div>

Crafted by