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

41–50 of 120 posts

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

#41

Post by cluckindan »

insin wrote: post #31
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?

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' }, '.cr…

Tailwind sure is a blight upon frontend maintainability.

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

#42

Post by cluckindan »

freetonik wrote: post #20
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?

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.

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.

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

#43

Post by cluckindan »

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.

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

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

#44

Post by buremba »

n144q wrote: post #40

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 work…

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.

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

#46

Post by esprehn »

oneeyedpigeon wrote: post #14
aimazon wrote: post #4

Earlier quoted context omitted.

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.

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

#48

Post by 9dev »

cluckindan wrote: post #41
insin wrote: post #31

Earlier quoted context omitted.

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' }, '.cr…

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?
Post reply on HN