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

101–110 of 120 posts

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

#101

Post by emmanueloga_ »

vidyesh wrote: post #29

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…

Chrome/Edge has a nice feature that I don't think Firefox includes. It allows you to quickly toggle between flex modes [1].

--

1: https://imgur.com/a/17iy1eN

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

#102

Post by gjsman-1000 »

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

Earlier quoted context omitted.

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

Bull. I have no clue at this glance what .input specifies, or what I can override without a conflict. Heck, .input might not even exist, resulting in only stock browser styles. The bottom one, I can fully picture while it isn’t much longer, the above is opaque and gives me no information at all about the look.

Secondly though, and why this opinion is frankly stupid, is that I can just put this in my CSS code before it’s built through Vite:

input { @apply 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; }

And then lo and behold, I’ll do you one better:

is now fully styled, with Tailwind only.

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

#103

Post by pcchristie »

insin wrote: post #21
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…

You've just given me a flashback to a learning project I did 6 months ago where I think I had this exact issue with this exact type of layout, and I ended up going with some other forced hack to fix that problem because I never worked out the solution...

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

#104

Post by recursive »

dylan604 wrote: post #72
recursive wrote: post #70

Earlier 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

Then you can use 1fr 10fr or any ratio you want.

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

#105

Post by mhuffman »

bigtex88 wrote: post #56

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.

I have never had any trouble with flexbox or grid, but am curious how do you use LLMs to do your layout or to get it to do layout with flexboxes? Do you just give it a very detailed description of the layout? Or do you give it an image that you have put together? Do you have an example of this? I am very curious to try it myself.

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

#107

Post by namibj »

bobthepanda wrote: post #80
dieselgate wrote: post #57

Earlier quoted context omitted.

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.

Sorry for wrong thread; 38c3 kept me too busy to catch the reply window for https://news.ycombinator.com/item?id=42490859 :

actually, that was the point of my comment a few parent generations up from linked: by hanging the train under the rail, you get perfect banking for basically free. Fair, entry and exit of turns has to be handled smoothly, but you get passive pendulum-based perfect bank angle at any speed from 0 to the maximum allowed for that radius. And while it's certainly not cheap to be forced to build the track as "technically a bridge", the lack of serious span makes the cost not actually that bad relative to train track in locations where the curve radius and speeds tend to actually be used (valleys narrow enough to need quite tight radii, as well as near existing infrastructure: if you're already bridging, it's easy to design the pillar point foundations to not conflict with existing usage).

Oh, and about the coffee you mentioned: just like bus and subway, (open) drinks and food are not allowed anyways. In any case, the only substantial forces would be increased gravity, and whatever traction limited acceleration along the direction of travel (this would be with deliberate jerk minimization, though, as people would otherwise loose their footing, where the currently active limits for subways come from).

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

#108

Post by jeeyoungk »

smarkov wrote: post #16

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.

This is one of the best thing I read; I thought I was pretty good at Flexbox (and its tailwindcss building blocks), but this scratched my itch on some theoretical foundations.

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

#109

Post by microflash »

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

I have found Grid by Example[1] by Rachel Andrew pretty useful to learn and use Grid.

[1]: https://gridbyexample.com

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

#110

Post by cluckindan »

gjsman-1000 wrote: post #102
cluckindan wrote: post #89

Earlier quoted context omitted.

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

Bull. I have no clue at this glance what .input specifies, or what I can override without a conflict. Heck, .input might not even exist, resulting in only stock browser styles. The bottom one, I can fully picture while it isn’t much longer, the above is opaque and gives me no information at all about the look. Secondly though, and why this opinion is frankly stupid, is that I can just put this in my CSS code before i…

It says ”input” right there in the classname. @apply might be the only sane way to use Tailwind, but it seems like a post-hoc mixin construct, and definitely has the same level of indirection of styles that you claim is an issue with classnames.

Strange you would be worried about accidental overrides with class selectors but then go ahead to target styles with tag selectors. Is that not objectively worse?

Btw, targeting input[type=”text”] means now you cannot apply those styles to a regular or using a class, which is sometimes useful, especially in very large projects.

I am still not at all convinced Tailwind is even slightly useful. It feels like shoehorning HTML4 , etc. into HTML5 classes.

All in all, your arguments come off as ad hoc rationalizations for a personal preference, not as substantial examples of Tailwind’s superiority over more traditional CSS approaches.

Post reply on HN