3 ms·
I wonder if something like this would've worked. I always mentally think of flex box as having a primary axis that's like a rope that runs through the container
by cdrini 2y ago
I wonder if something like this would've worked. I always mentally think of flex box as having a primary axis that's like a rope that runs through the container, and the children are stuck onto this rope.
```
display: flex;
// The flex axis is the axis where items get added. So horizontal would add things to the right, vertical to the bottom
flex-axis: horizontal;
flex-axis-align: center;
// Normal as used in math to mean perpendicular to the curve
flex-normal-align: center;
```
Or `flex-align: center;` for short.
This would give a decently simpler mental model with only three terms: the flex axis, the flex normal, and the alignment.
And actually it would allow some interesting natural extensions! You could do `flex-axis: path(...)` to specify an arbitrary curve to position your elements on.
Any edge cases I'm missing as to why this wouldn't work?
- Inviz 2y agoCSS goes away from left/right in general. See inline-* and block-* family of properties. This is to support RTL and vertical writing modes easier.
- cdrini 2y agoI don't use left/right anywhere in the CSS above...
- LudwigNagasena 2y agoThe official terms for what you call the flex axis and the flex normal are the main axis and the cross axis. https://www.w3.org/TR/css-flexbox-1/#box-model https://www.w3.org/TR/css-flexbox-1/#box-model