Show HN: Struggle with CSS Flexbox? This Playground Is for You

#1

Post by yoav_sbg » Sun, Jan 05, 2025, 9:02 AM UTC

Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.

Show HN: Struggle with CSS Flexbox? This Playground Is for You
yoavsbg.github.io

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#2

Post by p0w3n3d » Sun, Jan 05, 2025, 9:43 AM UTC

2025: two years and three tutorials later I still cannot use flex properly.

Another one that didn't help me as well: https://flexboxfroggy.com/

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#3

Post by yoav_sbg » Sun, Jan 05, 2025, 9:49 AM UTC

p0w3n3d wrote: post #2

2025: two years and three tutorials later I still cannot use flex properly. Another one that didn't help me as well: https://flexboxfroggy.com/

I also know flexboxfroggy but as I like to "play" and less read/write I didn't find this website useful. Hope you will find it useful. If something is missing, please let me know :)

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#4

Post by aimazon » Sun, Jan 05, 2025, 9:58 AM UTC

p0w3n3d wrote: post #2

2025: two years and three tutorials later I still cannot use flex properly. Another one that didn't help me as well: https://flexboxfroggy.com/

After years of working with Flexbox, I have realized Flexbox is like plugging in a USB-A: justify and align are always the wrong way around on first try.

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#5

Post by likium » Sun, Jan 05, 2025, 10:01 AM UTC

Nice playground! I built an interactive guide a few years ago with a similar playground at the end: https://lik.ai/guides/an-interactive-guide-to-flexbox/

It was useful to refresh my memory here and there with it.

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#6

Post by codedrivendev » Sun, Jan 05, 2025, 10:03 AM UTC

I know others have already mentioned it, but i've recommended https://flexboxfroggy.com/ to others before and they quickly picked it up.

This is another good one for learning css grid https://cssgridgarden.com/

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#7

Post by yoav_sbg » Sun, Jan 05, 2025, 10:12 AM UTC

likium wrote: post #5

Nice playground! I built an interactive guide a few years ago with a similar playground at the end: https://lik.ai/guides/an-interactive-guide-to-flexbox/ It was useful to refresh my memory here and there with it.

Thanks. your playground is very informative. Like!

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#8

Post by wouldbecouldbe » Sun, Jan 05, 2025, 10:12 AM UTC

Hahaha yeah developers thinking of too complicated abstract solutions and forcing it on us seems to be a recurring theme.

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#9

Post by yoav_sbg » Sun, Jan 05, 2025, 10:14 AM UTC

codedrivendev wrote: post #6

I know others have already mentioned it, but i've recommended https://flexboxfroggy.com/ to others before and they quickly picked it up. This is another good one for learning css grid https://cssgridgarden.com/

I like the gamification of the cssgridgarden, it is similar to https://www.codemonkey.com/ which is mainly for kids!

Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You

#10

Post by philippta » Sun, Jan 05, 2025, 10:14 AM UTC

I never struggle with flexbox itself. But getting a flexbox right in which the content overflows is always a mystery to me.

If anyone has a guide or spec how overflow rules apply in CSS, please share.