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.
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.
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 eventually I get it.
I feel like I should be able to make a few css classes to cover all of this but I have yet to figure it out for every case.
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.
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
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.
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.
- [deleted]
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
- [deleted]
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.
Heh. I made a tool to translate <table>-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 <table>-based layout is, that we still can't even get close to its usability.
In almost every framework there is confusion about if a property is applied on itself or its children. Always the same thing.
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've gone back to https://cssgridgarden.com/ multiple times. It's https://flexboxfroggy.com/ but for grids.
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).
I've reached the other opinion. I learned flexbox better than most, but it never felt "intuitive" and it was hard to reason about complex flexbox layouts, especially responsive ones with multiple variations. Flexbox in general seems so hard to reason about that there are a million "helper" libraries for it, each with their own mini-DSLs on top of the flexbox DSL. Every junior developer's usage of flexbox starts to look like Tailwind, covered in these DSLs for DSLs, increasingly spread out across the elements of the DOM.
Whereas the "ASCII diagrams" of grid-template-areas, especially, I think is one of the most intuitive things in recent CSS. The majority of Grid CSS styles are generally centralized to your top-most containers outside `grid-area: some-area-name;` container classes (which may also have an align or justify) and the rare `display: contents;` (if you count that as Grid CSS) or `display: subgrid;`. Responsive layouts in CSS Grid is just changing the templates in your central containers based on your breakpoints.
I've gotten about to the point that even for 1D layouts I'm about to "forbid" junior developers from using flexbox to avoid its seemingly inevitable decline (in so many large apps I've seen) to inline-style soup via (usually ad hoc) Tailwind-like DSLs, because CSS Grid is easy enough and clean enough to use everywhere.
I have found Grid by Example[1] by Rachel Andrew pretty useful to learn and use Grid.
Flex is for 1d layout, grid is for 2d layout. Anything by Jen Simmons is a great resource for learning grid.
Grid is originally based on WPF XAML grid system, as it was the former IE team that contributed the original design, and I still can't grasp it fully, even though I spent 4 years doing WPF development.
1fr
wtf is an fr anyways? is a question I've never been able to retain the answer. there are many times where i've attempted to use grid layout, and then ultimately just switched back to neanderthal mode and used a table.
Fraction. As in 1/n.
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
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
Then you can use 1fr 10fr or any ratio you want.
the any ratio I want is the point of the exercise. i don't know how many or what size. i want the first column to be just wide enough, and the second column to fill the space. what you suggested does not do that, but thanks for playing
You're welcome.
Now that you've explained the rest of your requirements, I can see that `fr` is not suitable for the purpose. In the meantime you've gotten a better answer for the updated requirements, in particular min-content and max-content.
The requirements have not changed.
Maybe not, but the way they were described has.
First:
> I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width
Second:
> i want the first column to be just wide enough, and the second column to fill the space.