Use flexbox to pack multiple elements. Use grids for layout
Show HN: Struggle with CSS Flexbox? This Playground Is for You
91–100 of 120 posts
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#92In 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?
There's a reason "naming things" is one of the great hard problems of programming. Especially when you have to name hundreds of things while developing i.e. a framework. Unless it's a solo pedantic developer creating the entire thing, inconsistencies will crop up, some names won't age well, some names don't quite capture the thing they are naming, etc.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#93Earlier 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.
Is this something to understand or memorize?
Yes- justify-content: center will center items along the flex direction. For example, if your flex-direction is "row" then it will center your items in the middle of the row horizontally. align-items: center will center your items in the middle of the row vertically.
For example, justify-content: center and flex-direction: row centers items the same as align-items: center and flex-direction: column
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#94In 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.
Heh. I made a tool to translate -based layouts to CSS just to try and memorize all the settings. I failed (to memorize them).
I still use it from time to time.
It's amazing how simple and intuitive the -based layout is, that we still can't even get close to its usability.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#95Earlier 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.
I've deeply internalised that with flexbox, when using rows or columns that I need to visualise a row that holds multiple columns. And for a column, it's got multiple rows inside it. I literally have to visualise this in my head to remember the correct property.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#96In 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.
My issue with flexbox is that I can't seem to memorize all the settings I need to get boxes within boxes and content to either fill a box or the box to surround the content. This is particular important on an SPA where I want the boxes to fill the screen but never overflow it. I manage eventually. I need to put the totally intuitive (sarcasm) min-width: 0, here and there, and a few other things here and there and eve…
It's mostly:
- "flex: 1 1 0px" for fill available space
- "flex: 0 0 auto" for sizes to content
And then arguably every flexbox item ought to have min-width (and/or min-height) set to 0 because flexbox has a "min content sized" automatic minimum size built-in, which is rarely what you want. But if the content isn't overflowing or can be compressed in some way then you can get away without this.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#97Earlier quoted context omitted.
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…
For my last few projects I've resorted to *,*:before,*:after { min-width: 0} I haven't had a single problem with it. I honestly feel this part of the spec was a mistake, given all the confusion I see. Online discussions suggest 'auto' is a counterintuitive default.
I totally agree. And not only is it unintuitive, it's bad for layout performance!
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#98Earlier quoted context omitted.
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.
Well, what is it then that is so complex about Tailwind? I’ve been hearing that for so long, but nobody was ever able to explain succinctly what Tailwind made so awfully complicated.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#99In 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 thing I don't like about flexbox is that align-items and justify-content switch what they do depending on the flex-direction.
justify-content: center; with flex-direction: row; makes the element horizontally centered. But justify-content: center with flex-direction: column; makes the element vertically centered.
Re: Show HN: Struggle with CSS Flexbox? This Playground Is for You
#100Having come from WPF with dotnet, XAML/WPF used to feel clunky and dated.
However, web front-end feels very chaotic by comparison. I’m still no expert, but my big gotchas are always div sizes ie min-max-fr height/width.
With WPF you can size Grids as auto or “*” and things size dynamically - I’ve grown to appreciate the WPF Grid and data binding.
It also doesn’t help that I find trial-and-error more helpful than css/html docs. The docs often feel tautological to me for some reason and it feels like there’s too many ways to achieve the same thing. I definitely recognize this personal experience - YMMV