4 ms·

> don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before The reason is "display: flex" can be a colum

> don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before 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.

jdmdmdmdmd 2y ago
[dead]
Rumudiez 2y ago
The other CSS terms for this are block and inline, as in padding-inline-start and padding-block-end. Whether it’s the top/bottom/left/right edge is determined by flow direction. iOS/SwiftUI calls the inline directions leading and trailing, but I’m not sure how it works with vertical type
- LudwigNagasena 2y ago
  Technically, block and inline dimensions are defined with respect to the direction of the text. The terms used in the CSS spec to refer to the direction of justify-content and align-items are the main axis and the cross axis, respectively.
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 ago
  CSS 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 ago
    I don't use left/right anywhere in the CSS above...
- LudwigNagasena 2y ago
  The 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
naasking 2y ago
Arguably, "align" and "cross-align" are more direct and descriptive.

jdmdmdmdmd 2y ago

[dead]

Rumudiez 2y ago

The other CSS terms for this are block and inline, as in padding-inline-start and padding-block-end. Whether it’s the top/bottom/left/right edge is determined by flow direction. iOS/SwiftUI calls the inline directions leading and trailing, but I’m not sure how it works with vertical type

LudwigNagasena 2y ago
Technically, block and inline dimensions are defined with respect to the direction of the text. The terms used in the CSS spec to refer to the direction of justify-content and align-items are the main axis and the cross axis, respectively.

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 ago
CSS 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 ago
  I don't use left/right anywhere in the CSS above...
LudwigNagasena 2y ago
The 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

naasking 2y ago

Arguably, "align" and "cross-align" are more direct and descriptive.