css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. Very helpful! Thanks

  2. This is very useful. Well done!

  3. awesome, thanks!!

  4. Super useful, @Gabi! Thanks for making this!

  5. This one is going into my bookmarks. Well done ;)

  6. This is gold! Thank you!

  7. cool 'playgroung'! thnks

  8. Thanks @Gabi! it's really useful :)

  9. This is truly a magnificent gift for anyone learning or using flexbox.

  10. This is awesome--thank you!

  11. This si without a doubt the best guide/tool for figuring out what flexbox can and can't do! Gave be a few ideas of my own too! :)

  12. The best and prettiest flex-box primer/playground I've seen so far. Great work by Gabi (and CodePen;))

  13. Love it @enxaneta ! Just a heads up... you misspelled "playground" ... :)

    Will be sharing this pen with coworkers when we talk more about Flexbox!

  14. Lol thank you so much @kbav!! I hate spelling errors.

  15. Ditto for this being a terrific guide. Examples are perfect and as @kbav mentioned, will be sharing with co-workers. Nice job!

  16. Just wanted to say thanks for this. Been using it quite a bit. :)

  17. Thank you for your words @thebabydino

  18. @enxaneta This is awesome! Another typo, though: "Propertyes for the flex items"

  19. Thank you @nategreen. Thank you for the tip!

  20. Very useful! Thanks for your work, I will use your pen for my flexbox class, I'm sure my students will understand it perfectly with your code. ;-)

  21. Thank You for taking the time to put this helpful demo together! :)

  22. Thanks Gabi. Loved it

  23. Anyone happen to know if someone has built a similar playground for CSS Grid? If not, I might take a stab at it!

  24. This repo is very awesome, thankkkkkkkkkkkkkkkkkkkkkkkk you!

  25. @enxaneta this is very nice.

    one observation tho: order for flex items can also be set for negative, and as such this option to go into negative area, for numbers lower than zero should be enabled.

  26. @enxaneta very useful tool!

    can you update to add space-evenly?

  27. today I learned that

    justify-content: stretch;

    exists as well. should update, probably

  28. This is cool and very well done!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.