wanna share this similar one too: https://qishaoxuan.github.io/css_tricks/flexbox/
Show HN: Struggle with CSS Flexbox? This Playground Is for You
71–80 of 120 posts
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#72Earlier quoted context omitted.
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"
> 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
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#73I understand the basics of flexbox. The part that gets me is when I start putting pieces together and nesting divs and flex box items.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#74Earlier quoted context omitted.
Tailwind sure is a blight upon frontend maintainability.
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.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#75In 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.
It is impressive that Tailwind succeeded in making this even more confusing.
justify-content: center -> justify-center
align-items: center -> items-center
Just… why?
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#76In 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?
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#77As 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.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#78In 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.
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.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#79Earlier quoted context omitted.
> 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.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#80In 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.
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 use https://css-tricks.com/snippets/css/complete-guide-grid/ as a reference since it has pictures.