Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

yoavsbg.github.io

Post reply on HN
Print view View original

21–30 of 120 posts

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

#21

Post by insin »

philippta wrote: post #10

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.

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

#23

Post by sod »

vishnuharidas wrote: post #18

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

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.

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

#24

Post by vishnuharidas »

sod wrote: post #23
vishnuharidas wrote: post #18

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

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.

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

#25

Post by KolmogorovComp »

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 tried flexboxfroggy, and while the concept is nice and well executed, the lack of syntax completion really is putting me off.

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

#27

Post by lenkite »

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/

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.

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

#29

Post by vidyesh »

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.

Post reply on HN