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

81–90 of 120 posts

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

#81

Post by dylan604 »

robertoandred wrote: post #79
dylan604 wrote: post #72

Earlier quoted context omitted.

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.

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

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

#82

Post by itake »

cynicalpeace wrote: post #55
karaterobot wrote: post #54

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.

justify-content should be called main-axis. align-items should be called cross-axis. Once you understand this, all of flexbox becomes easy.

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.

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

#83

Post by gjsman-1000 »

cluckindan wrote: post #74
gjsman-1000 wrote: post #64

Earlier quoted context omitted.

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.

I don’t even know what this means, but it sounds either stupid, or a theory that only works in a clean room laboratory.

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

#84

Post by [deleted] »

cynicalpeace wrote: post #55
karaterobot wrote: post #54

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.

justify-content should be called main-axis. align-items should be called cross-axis. Once you understand this, all of flexbox becomes easy.

[deleted]

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

#86

Post by tracker1 »

9dev wrote: post #48
cluckindan wrote: post #41

Earlier quoted context omitted.

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?

... except for where you aren't wanting to replace.

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

#87

Post by [deleted] »

itake wrote: post #82
cynicalpeace wrote: post #55

Earlier quoted context omitted.

justify-content should be called main-axis. align-items should be called cross-axis. Once you understand this, all of flexbox becomes easy.

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.

[deleted]

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

#88

Post by paradox460 »

karaterobot wrote: post #54

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.

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

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

#89

Post by cluckindan »

gjsman-1000 wrote: post #83
cluckindan wrote: post #74

Earlier quoted context omitted.

There is no semantic connection between design and code.

I don’t even know what this means, but it sounds either stupid, or a theory that only works in a clean room laboratory.

Maybe you need to figure it out before jumping to conclusions like that.

I think it’s much easier to understand what
is supposed to be compared to

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

#90

Post by JamesSwift »

dieselgate wrote: post #57
karaterobot wrote: post #54

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.

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

Flex is for 1d layout, grid is for 2d layout. Anything by Jen Simmons is a great resource for learning grid.
Post reply on HN