Flexboxle
Arrange coloured blocks into today's goal layout using CSS flexbox or Tailwind classes.
Every day: One CSS flexbox layout puzzle per date, served by date to every player: add flexbox classes until the numbered blocks match the goal layout, in six attempts. Older puzzles are rerun on later dates. New puzzle: Local midnight (the puzzle is requested for your device's date).
Flexboxle is a daily puzzle for practising CSS flexbox. You see a start layout of numbered blocks and a goal layout, and you edit the code with flexbox properties, in plain CSS or Tailwind classes, until your result matches the goal within six attempts.
About Flexboxle
Flexboxle turns a front-end skill into a daily game. Each puzzle has a name (for example Balanced, Pyramid or Arrow Right), a starting layout of numbered coloured blocks and a goal picture showing where the blocks need to end up. The site serves the puzzle for the current date from its server, so everyone playing on that date gets the same layout; puzzles from the first months are reused on later dates.
You edit the markup in a code panel, switching between Tailwind and plain CSS, and can use Quick Add to insert common classes such as flex-col, gap-1 or justify-center. When you submit, the game compares your layout with the goal and marks it Perfect, Close or Wrong. You have six attempts.
There are stats, a dark mode and detailed instructions for newcomers to flexbox.
It suits web developers and students who want a few minutes of hands-on flexbox practice a day, and puzzle fans who enjoy seeing code turn into layout.
How to play Flexboxle
- Compare the Start and Goal panels to see where each block must go.
- Add flexbox properties in the code panel, as Tailwind classes or plain CSS, or use Quick Add.
- Submit; the game marks your layout Perfect, Close or Wrong.
- Match the goal within six attempts.
Screenshots
Tips
- Decide the direction first: row or column, and whether items wrap.
- Use justify-content for the main axis and align-items or align-self for the cross axis.
- Nested containers can take their own classes; check each box in the markup.
- Gaps between blocks usually come from the gap property, not margins.
Questions
Is the puzzle the same for everyone?
Yes. The puzzle is fetched from the server for the date, so all players on that date get the same one.
Do I need to know CSS?
Basic flexbox knowledge helps; the instructions and Quick Add buttons help beginners.
How many attempts do I get?
Six.
Can I use Tailwind?
Yes, you can switch between Tailwind classes and plain CSS.
Games like Flexboxle
Regexle
Another daily puzzle built on real coding syntax, here regular expressions in a hex crossword.
Programmdle
A daily guess of a programming language or framework, for developers who enjoy a quick puzzle.
Hexcodle
Guess the hex code of the day's colour, a skill web developers use every day.
Hexle
Find the day's web colour as a hex code in six tries.
ARCaptcha
Work out the rules of a small game by trying things, like testing layouts until they match.
Pokle
Work out the five board cards of a poker hand from how three players ranked on each street.
0h n0
Place red dots so every blue dot sees exactly its number, with a fresh set of grids each day.
101weiqi Daily Eight (每日八题)
Eight go problems a day, from 12 kyu to dan level, under one date for everyone.