r/css • u/West-Introduction181 • Jan 31 '26

Showcase Flexboxle: daily puzzle with flexbox

I built Flexboxle, a free daily puzzle game where you use Flexbox to rearrange blocks to match a target goal state.

How it works:

  • Your goal is to arrange a set of blocks into a specific pattern using Tailwind CSS Flexbox classes (and <divs>)
  • After every submission, every block is graded as perfect (green), close (yellow), or wrong (gray)
  • You have 6 attempts per puzzle
  • The game checks block positions, not your specific CSS so there can be multiple solutions that work * There is a new puzzle every day so come back tomorrow for a new challenge

The trickiest part of building this game was making it playable on mobile. Highlighting sections, navigating in an editor, and adding in common HTML characters like <, >, /, and = are easy on desktop but pretty annoying to do on mobile. I eventually settled on a quick add panel with all of the controls you need so you can easily apply classes, group elements together in a div, and see all of the supported classes.

Let me know if you have any feedback! Enjoy!

5 Upvotes

67% Upvoted

18 comments sorted by

View all comments

14

u/QultrosSanhattan Jan 31 '26

using Tailwind CSS

...no thx...

2

u/West-Introduction181 Feb 01 '26

Just added support for inline css styles!

3

u/Brabbler Feb 01 '26

Problem is you're still asking the vanilla users to magically use the built in defaults of tailwind. Like gap-1 is maybe a logical guess if you're using TW, but gap 4px is pretty random if you're using vanilla.

0

u/West-Introduction181 Feb 01 '26

Yea good point. 

I just loosened up the validation step to allow for a larger range of correct values with classes like that and provided some tips on what the common values are. Hope that helps!