[HN Gopher] Show HN: Struggle with CSS Flexbox? This Playground ...
___________________________________________________________________
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.
Author : yoav_sbg
Score : 256 points
Date : 2025-01-05 09:02 UTC (13 hours ago)
(HTM) web link (yoavsbg.github.io)
(TXT) w3m dump (yoavsbg.github.io)
| p0w3n3d wrote:
| 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/
| yoav_sbg wrote:
| 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 :)
| aimazon wrote:
| 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.
| oneeyedpigeon wrote:
| But, like USB-A, are they also frequently the wrong way round
| the second time too?
| esprehn wrote:
| Yes.
| lenkite wrote:
| 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.
| likium wrote:
| 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.
| yoav_sbg wrote:
| Thanks. your playground is very informative. Like!
| notRobot wrote:
| Such a fun playground! Thanks for this :)
| codedrivendev wrote:
| 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/
| yoav_sbg wrote:
| I like the gamification of the cssgridgarden, it is similar to
| https://www.codemonkey.com/ which is mainly for kids!
| KolmogorovComp wrote:
| I tried flexboxfroggy, and while the concept is nice and well
| executed, the lack of syntax completion really is putting me
| off.
| dieselgate wrote:
| This is hilarious hope it is satire
| kmoser wrote:
| 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.
| wouldbecouldbe wrote:
| Hahaha yeah developers thinking of too complicated abstract
| solutions and forcing it on us seems to be a recurring theme.
| philippta wrote:
| 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.
| insin wrote:
| 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.
| jbeninger wrote:
| 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.
| cluckindan wrote:
| Use box-sizing: border-box on everything and your life with
| flexbox will be a lot easier.
| yoav_sbg wrote:
| I added the github Link if you have any feedback or changes!
| scotty79 wrote:
| Still better than floats. Maybe some day we will again approach
| ease of use of the html tables.
| BiteCode_dev wrote:
| Or just ask chatgpt.
| andrewstuart wrote:
| Flexbox makes sense when you understand it is 2 dimensional.
|
| Everything in FB is 2 dimensional.
| smarkov wrote:
| 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.
| dom96 wrote:
| This is great, but the problem is I won't be able to find it when
| I am working with CSS Flexbox
| nayuki wrote:
| Bookmark it in your web browser
| vishnuharidas wrote:
| Why did they name those props `justify-content` and `align-items`
| instead of `main-axis-arrangement` and `cross-axis-alignment`
| which makes more sense?
| freetonik wrote:
| 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.
| sureIy wrote:
| 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.
| cluckindan wrote:
| 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.
| sod wrote:
| 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.
| vishnuharidas wrote:
| But when the `flex-direction` is `column`, `justify-content`
| becomes synonymous for "vertical alignment" - that's what
| creates the confusion here.
| rererereferred wrote:
| I guess it makesmsense if flex-direction vertical is like
| switching to a vertical language.
| insin wrote:
| 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' },
| }) })
| cluckindan wrote:
| Tailwind sure is a blight upon frontend maintainability.
| 9dev wrote:
| 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?
| tracker1 wrote:
| ... except for where you aren't wanting to replace.
| gjsman-1000 wrote:
| 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.
| cluckindan wrote:
| There is no semantic connection between design and code.
| gjsman-1000 wrote:
| I don't even know what this means, but it sounds either
| stupid, or a theory that only works in a clean room
| laboratory.
| cluckindan wrote:
| 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">
| rererereferred wrote:
| 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.
| cantSpellSober wrote:
| 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.
| sn0wtrooper wrote:
| I really love flex. Helped me get over bootstrap and floats.
| conradfr wrote:
| I use Bootstrap Flex utilities.
| yoav_sbg wrote:
| Cool!
| Kwpolska wrote:
| This seems extremely limited to just four container properties,
| completely ignoring the child item properties, which are quite
| important in flexbox as well.
| darekkay wrote:
| 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/
| rererereferred wrote:
| I like this! I can already see the effect without having to
| select it and the links to MDN are much appreciated.
| atum47 wrote:
| 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
| vidyesh wrote:
| 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.
| cluckindan wrote:
| Overuse of flexbox and grid leads to hard to comprehend and slow
| layout.
| lovegrenoble wrote:
| Another one: https://flexboxcss.com
| yoav_sbg wrote:
| Really nice project
| n144q wrote:
| 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.
| buremba wrote:
| 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.
| indulona wrote:
| 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.
| karaterobot wrote:
| 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.
| cynicalpeace wrote:
| justify-content should be called main-axis. align-items should
| be called cross-axis.
|
| Once you understand this, all of flexbox becomes easy.
| bobbylarrybobby wrote:
| Is this something to understand or memorize?
| itake wrote:
| 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.
| dieselgate wrote:
| 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
| frob wrote:
| I've gone back to https://cssgridgarden.com/ multiple times.
| It's https://flexboxfroggy.com/ but for grids.
| dylan604 wrote:
| 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.
| mixmastamyk wrote:
| Fraction. As in 1/n.
| dylan604 wrote:
| 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"
| sosborn wrote:
| https://www.digitalocean.com/community/tutorials/css-css-
| gri...
| recursive wrote:
| > 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;
| dylan604 wrote:
| 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
| robertoandred wrote:
| Try min-content, fit-content, or max-content instead of
| auto.
| dylan604 wrote:
| 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
| pjmlp wrote:
| 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.
| bobthepanda wrote:
| I use https://css-tricks.com/snippets/css/complete-guide-
| grid/ as a reference since it has pictures.
| JamesSwift wrote:
| Flex is for 1d layout, grid is for 2d layout. Anything by Jen
| Simmons is a great resource for learning grid.
| holoduke wrote:
| In almost every framework there is confusion about if a
| property is applied on itself or its children. Always the same
| thing.
| nox101 wrote:
| 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.
| yojo wrote:
| It is impressive that Tailwind succeeded in making this even
| more confusing.
|
| justify-content: center -> justify-center
|
| align-items: center -> items-center
|
| Just... why?
| bobbylarrybobby wrote:
| 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.
| paradox460 wrote:
| 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
| bigtex88 wrote:
| 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.
| CamperBob2 wrote:
| "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.
| frob wrote:
| 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.
| rinvi wrote:
| wanna share this similar one too:
| https://qishaoxuan.github.io/css_tricks/flexbox/
| hk1337 wrote:
| 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.
| tiznow wrote:
| I needed this 3 days ago before I approached a mental breakdown,
| haha.
| jbverschoor wrote:
| Use flexbox to pack multiple elements. Use grids for layout
___________________________________________________________________
(page generated 2025-01-05 23:00 UTC)