Show HN: Struggle with CSS Flexbox? This Playground Is for You | Hacker News Reader

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

yoavsbg.github.io

315 pointsyoav_sbg115 comments

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.

Open articleView on HN

In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to anyone who wasn't involved in the long proceedings that led up to the spec being written. You try to remember which one is justify-content, which one is align-items, and so forth, and just give up and try everything until something seems to work.

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

Once you understand this, all of flexbox becomes easy.

Is this something to understand or memorize?

Yes- justify-content: center will center items along the flex direction. For example, if your flex-direction is "row" then it will center your items in the middle of the row horizontally. align-items: center will center your items in the middle of the row vertically.

For example, justify-content: center and flex-direction: row centers items the same as align-items: center and flex-direction: column

I have issues with "row" vs "column"

If you choose "row", I see 1 row and 5 columns. So if I want more columns, I need to choose "row".

If you choose "column", I see 5 rows and 1 column. So if I want more rows, I need to choose "column".

When the content is wrapped, the setting is more intuitive, but most of the time, you don't want to use the wrap feature.

I've deeply internalised that with flexbox, when using rows or columns that I need to visualise a row that holds multiple columns. And for a column, it's got multiple rows inside it. I literally have to visualise this in my head to remember the correct property.

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

I've gone back to https://cssgridgarden.com/ multiple times. It's https://flexboxfroggy.com/ but for grids.

1fr

wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.

Fraction. As in 1/n.

right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"

https://www.digitalocean.com/community/tutorials/css-css-gri...

> second field stretching

If you want the second column to stretch, then the `fr` part is assigned to the second column. Mixing `fr` and `auto` doesn't really make sense. You can do it like this. https://codepen.io/tomtheisen/pen/emOeqPy

    grid-template-columns: 10em 1fr;

but i don't know if 10em is too much or too small. that's the point. i don't want a specific width defined

Try min-content, fit-content, or max-content instead of auto.

This is probably the way.

I also have issue of letting go and fully accepting the way of the flex. Instead of feeling comfortable just throwing elements inside the grid element, by brain needs each row to have a wrapper element like a tr and nested td instead of just tossing td elements in tbody (sticking to the table mentality). It took a minute for me to get that to click in my head for whatever reason

Then you can use 1fr 10fr or any ratio you want.

the any ratio I want is the point of the exercise. i don't know how many or what size. i want the first column to be just wide enough, and the second column to fill the space. what you suggested does not do that, but thanks for playing

You're welcome.

Now that you've explained the rest of your requirements, I can see that `fr` is not suitable for the purpose. In the meantime you've gotten a better answer for the updated requirements, in particular min-content and max-content.

The requirements have not changed.

Maybe not, but the way they were described has.

First:

> I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width

Second:

> i want the first column to be just wide enough, and the second column to fill the space.

Grid is originally based on WPF XAML grid system, as it was the former IE team that contributed the original design, and I still can't grasp it fully, even though I spent 4 years doing WPF development.

I use https://css-tricks.com/snippets/css/complete-guide-grid/ as a reference since it has pictures.

Sorry for wrong thread; 38c3 kept me too busy to catch the reply window for https://news.ycombinator.com/item?id=42490859 :

actually, that was the point of my comment a few parent generations up from linked: by hanging the train under the rail, you get perfect banking for basically free. Fair, entry and exit of turns has to be handled smoothly, but you get passive pendulum-based perfect bank angle at any speed from 0 to the maximum allowed for that radius. And while it's certainly not cheap to be forced to build the track as "technically a bridge", the lack of serious span makes the cost not actually that bad relative to train track in locations where the curve radius and speeds tend to actually be used (valleys narrow enough to need quite tight radii, as well as near existing infrastructure: if you're already bridging, it's easy to design the pillar point foundations to not conflict with existing usage).

Oh, and about the coffee you mentioned: just like bus and subway, (open) drinks and food are not allowed anyways. In any case, the only substantial forces would be increased gravity, and whatever traction limited acceleration along the direction of travel (this would be with deliberate jerk minimization, though, as people would otherwise loose their footing, where the currently active limits for subways come from).

Flex is for 1d layout, grid is for 2d layout. Anything by Jen Simmons is a great resource for learning grid.

I have found Grid by Example[1] by Rachel Andrew pretty useful to learn and use Grid.

[1]: https://gridbyexample.com

I've reached the other opinion. I learned flexbox better than most, but it never felt "intuitive" and it was hard to reason about complex flexbox layouts, especially responsive ones with multiple variations. Flexbox in general seems so hard to reason about that there are a million "helper" libraries for it, each with their own mini-DSLs on top of the flexbox DSL. Every junior developer's usage of flexbox starts to look like Tailwind, covered in these DSLs for DSLs, increasingly spread out across the elements of the DOM.

Whereas the "ASCII diagrams" of grid-template-areas, especially, I think is one of the most intuitive things in recent CSS. The majority of Grid CSS styles are generally centralized to your top-most containers outside `grid-area: some-area-name;` container classes (which may also have an align or justify) and the rare `display: contents;` (if you count that as Grid CSS) or `display: subgrid;`. Responsive layouts in CSS Grid is just changing the templates in your central containers based on your breakpoints.

I've gotten about to the point that even for 1D layouts I'm about to "forbid" junior developers from using flexbox to avoid its seemingly inevitable decline (in so many large apps I've seen) to inline-style soup via (usually ad hoc) Tailwind-like DSLs, because CSS Grid is easy enough and clean enough to use everywhere.

In almost every framework there is confusion about if a property is applied on itself or its children. Always the same thing.

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.

It's mostly:

- "flex: 1 1 0px" for fill available space

- "flex: 0 0 auto" for sizes to content

And then arguably every flexbox item ought to have min-width (and/or min-height) set to 0 because flexbox has a "min content sized" automatic minimum size built-in, which is rarely what you want. But if the content isn't overflowing or can be compressed in some way then you can get away without this.

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

justify-content: center -> justify-center

align-items: center -> items-center

Just… why?

There's a reason "naming things" is one of the great hard problems of programming. Especially when you have to name hundreds of things while developing i.e. a framework. Unless it's a solo pedantic developer creating the entire thing, inconsistencies will crop up, some names won't age well, some names don't quite capture the thing they are naming, etc.

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.

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

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.

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.

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!

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

This is hilarious hope it is satire

No, why?

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 highly recommend Josh's guide: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

It goes over more advanced gotchas and tips in detail such as flex-basis, auto margins, min-width, etc.

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.

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!

Such a fun playground! Thanks for this :)

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

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.

But, like USB-A, are they also frequently the wrong way round the second time too?

Yes.

It's because both USB-A and flexbox are in dimension of a higher order

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.

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

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.

What isn't clear (even to many experts) is that certain properties change the layout model entirely and that text has its own "pushing" box that contributes to sizing.

Everything is laid out on the page in a flow, according to DOM order. Think how a typewriter produces text on a page: top-down, left-to-right. This is the flow.

Absolute takes the element out of the flow while relative maintains it in the flow.

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.

But when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.

I guess it makesmsense if flex-direction vertical is like switching to a vertical language.

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' },
      })
    })

Tailwind sure is a blight upon frontend maintainability.

Is it, though? How much easier to refactor it in the future can it be, other than being able to search-replace Tailwind classes when the need arises to?

... except for where you aren't wanting to replace.

Well, what is it then that is so complex about Tailwind? I’ve been hearing that for so long, but nobody was ever able to explain succinctly what Tailwind made so awfully complicated.

I strongly disagree; any large project using CSS tended to have arcane names for everything and turned into a Tailwind of its own, but worse.

I also like Tailwind because it’s so self-documenting. Even if Tailwind’s development were to stop, tomorrow, and all of the style sheets were lost globally, I would know what everything is meant to be.

There is no semantic connection between design and code.

I don’t even know what this means, but it sounds either stupid, or a theory that only works in a clean room laboratory.

Maybe you need to figure it out before jumping to conclusions like that.

I think it’s much easier to understand what

    <input class=”input input--email input--valid”>

is supposed to be compared to

    <input class=”bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal”>

Bull. I have no clue at this glance what .input specifies, or what I can override without a conflict. Heck, .input might not even exist, resulting in only stock browser styles. The bottom one, I can fully picture while it isn’t much longer, the above is opaque and gives me no information at all about the look.

Secondly though, and why this opinion is frankly stupid, is that I can just put this in my CSS code before it’s built through Vite:

input { @apply bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal; }

And then lo and behold, I’ll do you one better:

<input type=“text”> </input> is now fully styled, with Tailwind only.

It says ”input” right there in the classname. @apply might be the only sane way to use Tailwind, but it seems like a post-hoc mixin construct, and definitely has the same level of indirection of styles that you claim is an issue with classnames.

Strange you would be worried about accidental overrides with class selectors but then go ahead to target styles with tag selectors. Is that not objectively worse?

Btw, targeting input[type=”text”] means now you cannot apply those styles to a regular <span> or <div> using a class, which is sometimes useful, especially in very large projects.

I am still not at all convinced Tailwind is even slightly useful. It feels like shoehorning HTML4 <color>, <font> etc. into HTML5 classes.

All in all, your arguments come off as ad hoc rationalizations for a personal preference, not as substantial examples of Tailwind’s superiority over more traditional CSS approaches.

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.

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.

When learning Flexbox, I've created a cheat sheet to look up the properties. Others might find it useful, too: https://darekkay.com/flexbox-cheatsheet/

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

This is great for quick visual cheatsheet but I think one just has use it everywhere in a project to make it stick. The syntax is fairly self-explainatory for me. (except row and column)

I never struggled with Flexbox or grid (most of it) but I see people being so confused. Just understand the box model, and use Firefox Dev tools. That helped me a lot when learning Flexbox model. It lets you visualize your containers quite well. I think even Chrome Dev tools do that now.

As everyone else mentioned, flexboxfroggy and cssgridgarden were very helpful to practice.

That being said, I still open the CSS-tricks cheatsheet everytime for syntax and I can never get if is row or column in the first try.

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

This seems extremely limited to just four container properties, completely ignoring the child item properties, which are quite important in flexbox as well.

I wonder if there is a set of interesting CSS challenges, with well written solutions and explanations, to help practice CSS layouts. And maybe debugging challenges -- why doesn't this code snippet give me the layout that I want?

ChatGPT has been very helpful when it comes to debugging CSS issues (not always correct but mostly in the right direction), still, I always want to get a deeper understanding of how CSS works. I have read books and tutorials, and for sure it just comes down to a set of rules, but correctly applying them is hard.

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.

You should let the use play around with the number of items inside the container and it's parameters as well, like flex-basis, grow... Good job never the less

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.

Every time I re-encounter this, I end up re-learning that min-width on flex items defaults to 'auto' and min-width: 0; is the secret sauce.

e.g. I recently made a component representing an attached file, where the flex items in its layout were:

    [icon] [filename] [button]

To get long filenames to not force their container to the full length of the string, so they could be truncated by text-overflow: ellipsis, I needed to put min-width: 0; on the flex item containing the filename.

For my last few projects I've resorted to

*,*:before,*:after { min-width: 0}

I haven't had a single problem with it. I honestly feel this part of the spec was a mistake, given all the confusion I see. Online discussions suggest 'auto' is a counterintuitive default.

I totally agree. And not only is it unintuitive, it's bad for layout performance!

You've just given me a flashback to a learning project I did 6 months ago where I think I had this exact issue with this exact type of layout, and I ended up going with some other forced hack to fix that problem because I never worked out the solution...

Use box-sizing: border-box on everything and your life with flexbox will be a lot easier.

As a heads-up to any other developer - this is the type of thing at which LLM's excel. I would absolutely never mess with Flexbox on my own anymore. It's too esoteric and weird, and I don't need to waste time trying to get things to line up when ChatGPT or any other LLM can get it done almost instantaneously.

"Here, have your mandatory downvote for suggesting a valid AI-based approach on HN." -- HN

This is exactly what LLMs are good for -- applications where you can immediately test and iterate on their output.

I have never had any trouble with flexbox or grid, but am curious how do you use LLMs to do your layout or to get it to do layout with flexboxes? Do you just give it a very detailed description of the layout? Or do you give it an image that you have put together? Do you have an example of this? I am very curious to try it myself.

Couple of different things I've tried that I've had pretty good luck with. Either just giving it a picture of something similar and saying "I want my layout to look like this". You can give it your code and tell it something like "I want the text in Box A to line up with XYZ" or something similar.

I treat it as if I'm speaking with the world's foremost expert on CSS and most of the time it's spot on.

Having come from WPF with dotnet, XAML/WPF used to feel clunky and dated.

However, web front-end feels very chaotic by comparison. I’m still no expert, but my big gotchas are always div sizes ie min-max-fr height/width.

With WPF you can size Grids as auto or “*” and things size dynamically - I’ve grown to appreciate the WPF Grid and data binding.

It also doesn’t help that I find trial-and-error more helpful than css/html docs. The docs often feel tautological to me for some reason and it feels like there’s too many ways to achieve the same thing. I definitely recognize this personal experience - YMMV

we should not be needing "guides". it should be simple and intuitive. if we need all of these tools to understand what we are doing, the spec is scrap and should have never been approved.

Overuse of flexbox and grid leads to hard to comprehend and slow layout.

Years ago I printed out the poster version of https://css-tricks.com/snippets/css/a-guide-to-flexbox/. It has lived on my desk since then. Every time I need to work with flexbox, it moves to the top of the pile and I'm good to go.

Same with their grid guide.

I understand the basics of flexbox. The part that gets me is when I start putting pieces together and nesting divs and flex box items.

Still better than floats. Maybe some day we will again approach ease of use of the html tables.

wanna share this similar one too: https://qishaoxuan.github.io/css_tricks/flexbox/

Flexbox makes sense when you understand it is 2 dimensional.

Everything in FB is 2 dimensional.

Maybe Grid Playground is a useful choice as well. In my opinion, CSS Grid layout has much more options than Flexbox.

Another one: https://flexboxcss.com

Really nice project

I needed this 3 days ago before I approached a mental breakdown, haha.

Why struggle with flexbox when you have a real grid

Use flexbox to pack multiple elements. Use grids for layout

I really love flex. Helped me get over bootstrap and floats.

I use Bootstrap Flex utilities.

Cool!

I added the github Link if you have any feedback or changes!

Awesome, looks nice!

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

Or just ask chatgpt.

This is great, but the problem is I won't be able to find it when I am working with CSS Flexbox

Bookmark it in your web browser

Reply on news.ycombinator.com