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

I have to visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally every time. There's a similar one for grid that's just as good.

My issue with flexbox is that I can't seem to memorize all the settings I need to get boxes within boxes and content to either fill a box or the box to surround the content.

This is particular important on an SPA where I want the boxes to fill the screen but never overflow it. I manage eventually. I need to put the totally intuitive (sarcasm) min-width: 0, here and there, and a few other things here and there and eventually I get it.

I feel like I should be able to make a few css classes to cover all of this but I have yet to figure it out for every case.

One trick is if you open the chrome css inspector, you can click an icon next to the display: flex rule and see iconographic representation of the various flex box properties, and click them to set them. Every page essentially becomes a playground

It is impressive that Tailwind succeeded in making this even more confusing.

justify-content: center -> justify-center

align-items: center -> items-center

Just… why?

justify-content should be called main-axis. align-items should be called cross-axis.

Once you understand this, all of flexbox becomes easy.

One thing I don't like about flexbox is that align-items and justify-content switch what they do depending on the flex-direction.

justify-content: center; with flex-direction: row; makes the element horizontally centered. But justify-content: center with flex-direction: column; makes the element vertically centered.

There are myriad “how to flexbox” but never seen good “how to grid” in my experience - I despise grid and have never intuitively gotten the hang of it and 95% of the time flexbox will work better and is easier anyway

Just my $.02

Heh. I made a tool to translate <table>-based layouts to CSS just to try and memorize all the settings. I failed (to memorize them).

I still use it from time to time.

It's amazing how simple and intuitive the <table>-based layout is, that we still can't even get close to its usability.

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

One of my flexbox faves which is very similar to OP: https://flexbox.tech/.

A useful tool for generating Bootstrap code is https://build.layoutit.com/ and for CSS grid https://grid.layoutit.com/. Unfortunately the former is limited to Bootstrap 4, not 5.

I tried flexboxfroggy, and while the concept is nice and well executed, the lack of syntax completion really is putting me off.

This is one of the best thing I read; I thought I was pretty good at Flexbox (and its tailwindcss building blocks), but this scratched my itch on some theoretical foundations.

Thanks. your playground is very informative. Like!

Such a fun playground! Thanks for this :)

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.

Man, why is it so hard to keep in memory ? Can keep a whole bunch of stuff in memory - including CSS float layout for years, but flexbox hits that strange place where if one doesn't use it for a couple of months, one tends to forget 80% of it and needs to re-read from scratch and spend time on the playground again.

The problem is that too many property names are just non-intuitive or plain wrong. They might as well have given them one or two letter symbolic names.

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 :)

There is probably some explanation, but in general, I find many CSS properties confusing and unintuitive: `color`, `text-align`, `position: absolute` vs `position: fixed` (absolute is still technically relative!), etc.

For discussion I'd argue

• this name works with Grid and Flexbox

• this convention matches justify-items and justify-self, which makes sense

to your point I still confuse it with align-content sometimes.

Similarly, I find confusing that the `grid-template` shorthand uses the y axis first: y1 / x1 / y2 / x2

It's also not zero based which I always forget.

Either Google has shifted _so much_ focus to getting an LLM to tell you about very real Encanto 2 spoilers that its search capabilities have atrophied, or my surprise at there not already being a Tailwind plugin for this is justified:

    const plugin = require('tailwindcss/plugin')

    const aliasFlexboxAlignment = plugin(function({ addUtilities }) {
      addUtilities({
        '.cross-axis-baseline': { 'align-items': 'baseline' },
        '.cross-axis-center': { 'align-items': 'center' },
        '.cross-axis-end': { 'align-items': 'flex-end' },
        '.cross-axis-start': { 'align-items': 'flex-start' },
        '.cross-axis-stretch': { 'align-items': 'stretch' },
        '.main-axis-around': { 'justify-content': 'space-around' },
        '.main-axis-between': { 'justify-content': 'space-between' },
        '.main-axis-center': { 'justify-content': 'center' },
        '.main-axis-end': { 'justify-content': 'flex-end' },
        '.main-axis-evenly': { 'justify-content': 'space-evenly' },
        '.main-axis-normal': { 'justify-content': 'normal' },
        '.main-axis-start': { 'justify-content': 'flex-start' },
      })
    })

I didn't confuse it since I use the mnemonic "formatting text to “justify” is horizontal in my language".

Sure you can change that. But that covers the flex default behavior.

Chrome/Edge has a nice feature that I don't think Firefox includes. It allows you to quickly toggle between flex modes [1].

--

1: https://imgur.com/a/17iy1eN

Same here, but with Claude. I often just ask it to rewrite the CSS to fix issues & make it look the way I want, and it does it for me much faster than going through the docs.

I like this! I can already see the effect without having to select it and the links to MDN are much appreciated.