9 ms·
Show HN: Struggle with CSS Flexbox? This Playground Is for You
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.
- p0w3n3d 2y ago2025: two years and three tutorials later I still cannot use flex properly. Another one that didn't help me as well: https://flexboxfroggy.com/ https://flexboxfroggy.com/
- yoav_sbg 2y agoI 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 :)
- aimazon 2y agoAfter 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.
- oneeyedpigeon 2y agoBut, like USB-A, are they also frequently the wrong way round the second time too?
- lenkite 2y agoMan, 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.
- likium 2y agoNice 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/ https://lik.ai/guides/an-interactive-guide-to-flexbox/ It was useful to refresh my memory here and there with it.
- codedrivendev 2y agoI know others have already mentioned it, but i've recommended https://flexboxfroggy.com/ https://flexboxfroggy.com/ to others before and they quickly picked it up. This is another good one for learning css grid https://cssgridgarden.com/ https://cssgridgarden.com/
- yoav_sbg 2y agoI like the gamification of the cssgridgarden, it is similar to https://www.codemonkey.com/ https://www.codemonkey.com/ which is mainly for kids!
- KolmogorovComp 2y agoI tried flexboxfroggy, and while the concept is nice and well executed, the lack of syntax completion really is putting me off.
- dieselgate 2y agoThis is hilarious hope it is satire
- KolmogorovComp 2y agoNo, why?
- kmoser 2y agoOne of my flexbox faves which is very similar to OP: https://flexbox.tech/ https://flexbox.tech/. A useful tool for generating Bootstrap code is https://build.layoutit.com/ https://build.layoutit.com/ and for CSS grid https://grid.layoutit.com/ https://grid.layoutit.com/. Unfortunately the former is limited to Bootstrap 4, not 5.
- wouldbecouldbe 2y agoHahaha yeah developers thinking of too complicated abstract solutions and forcing it on us seems to be a recurring theme.
- philippta 2y agoI 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.
- insin 2y agoEvery 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.
- jbeninger 2y agoFor 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.
- nicoburns 2y agoI totally agree. And not only is it unintuitive, it's bad for layout performance!
- pcchristie 2y agoYou'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...
- cluckindan 2y agoUse box-sizing: border-box on everything and your life with flexbox will be a lot easier.
- yoav_sbg 2y agoI added the github Link if you have any feedback or changes!
- scotty79 2y agoStill better than floats. Maybe some day we will again approach ease of use of the html tables.
- BiteCode_dev 2y agoOr just ask chatgpt.
- andrewstuart 2y agoFlexbox makes sense when you understand it is 2 dimensional. Everything in FB is 2 dimensional.
- smarkov 2y agoI highly recommend Josh's guide: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ 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.
- jeeyoungk 2y agoThis 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.
- dom96 2y agoThis is great, but the problem is I won't be able to find it when I am working with CSS Flexbox
- nayuki 2y agoBookmark it in your web browser
- vishnuharidas 2y agoWhy did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?
- freetonik 2y agoThere 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.
- sureIy 2y agoWhat 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.
- cluckindan 2y agoEverything 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.
- sod 2y agoI 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.
- vishnuharidas 2y agoBut when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.
- rererereferred 2y ago
- sn0wtrooper 2y agoI really love flex. Helped me get over bootstrap and floats.
- Kwpolska 2y agoThis seems extremely limited to just four container properties, completely ignoring the child item properties, which are quite important in flexbox as well.
- darekkay 2y agoWhen learning Flexbox, I've created a cheat sheet to look up the properties. Others might find it useful, too: https://darekkay.com/flexbox-cheatsheet/ https://darekkay.com/flexbox-cheatsheet/
- rererereferred 2y agoI like this! I can already see the effect without having to select it and the links to MDN are much appreciated.
- atum47 2y agoYou 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
- vidyesh 2y agoThis 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.
- emmanueloga_ 2y agoChrome/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 https://imgur.com/a/17iy1eN
- cluckindan 2y agoOveruse of flexbox and grid leads to hard to comprehend and slow layout.
- lovegrenoble 2y agoAnother one: https://flexboxcss.com https://flexboxcss.com
- yoav_sbg 2y agoReally nice project
- n144q 2y agoI 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.
- buremba 2y agoSame 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.
- T3RMINATED 2y ago[dead]
- indulona 2y agowe 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.
- karaterobot 2y agoIn 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.
- cynicalpeace 2y agojustify-content should be called main-axis. align-items should be called cross-axis. Once you understand this, all of flexbox becomes easy.
- bobbylarrybobby 2y agoIs this something to understand or memorize?
- cynicalpeace 2y agoYes- 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
- itake 2y agoI 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.
- deleted 2y ago[deleted]
- bigtex88 2y agoAs 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.
- CamperBob2 2y ago"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.
- mhuffman 2y agoI 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.
- bigtex88 2y agoCouple 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.
- frob 2y agoYears ago I printed out the poster version of https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 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.
- rinvi 2y agowanna share this similar one too: https://qishaoxuan.github.io/css_tricks/flexbox/ https://qishaoxuan.github.io/css_tricks/flexbox/
- hk1337 2y agoI understand the basics of flexbox. The part that gets me is when I start putting pieces together and nesting divs and flex box items.
- tiznow 2y agoI needed this 3 days ago before I approached a mental breakdown, haha.
- jbverschoor 2y agoUse flexbox to pack multiple elements. Use grids for layout
- sota_pop 2y agoHaving 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
- mediumsmart 2y agoWhy struggle with flexbox when you have a real grid
- thetalhatahir 2y agoAwesome, looks nice!
- amberwagner 2y agoMaybe Grid Playground is a useful choice as well. In my opinion, CSS Grid layout has much more options than Flexbox.