The reason is "display: flex" can be a column or row. The "align-items" property describes alignment along the axis, so vertical for column and horizontal for row. The "justify-content" property is the other direction.
The reason is "display: flex" can be a column or row. The "align-items" property describes alignment along the axis, so vertical for column and horizontal for row. The "justify-content" property is the other direction.
```
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?