3 ms·

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

freetonik 2y ago
There is probably some explanation, but in general, I find many CSS properties confusing and unintuitive: `color`, `text-align`, `position: absolute` vs `position: fixed` (absolute is still technically relative!), etc.
- sureIy 2y ago
  What isn't clear (even to many experts) is that certain properties change the layout model entirely and that text has its own "pushing" box that contributes to sizing.
- cluckindan 2y ago
  Everything is laid out on the page in a flow, according to DOM order. Think how a typewriter produces text on a page: top-down, left-to-right. This is the flow. Absolute takes the element out of the flow while relative maintains it in the flow.
sod 2y ago
I didn't confuse it since I use the mnemonic "formatting text to “justify” is horizontal in my language". Sure you can change that. But that covers the flex default behavior.
- vishnuharidas 2y ago
  But when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.
  - rererereferred 2y ago
    I guess it makesmsense if flex-direction vertical is like switching to a vertical language.
insin 2y ago
Either Google has shifted _so much_ focus to getting an LLM to tell you about very real Encanto 2 spoilers that its search capabilities have atrophied, or my surprise at there not already being a Tailwind plugin for this is justified: const plugin = require('tailwindcss/plugin') const aliasFlexboxAlignment = plugin(function({ addUtilities }) { addUtilities({ '.cross-axis-baseline': { 'align-items': 'baseline' }, '.cross-axis-center': { 'align-items': 'center' }, '.cross-axis-end': { 'align-items': 'flex-end' }, '.cross-axis-start': { 'align-items': 'flex-start' }, '.cross-axis-stretch': { 'align-items': 'stretch' }, '.main-axis-around': { 'justify-content': 'space-around' }, '.main-axis-between': { 'justify-content': 'space-between' }, '.main-axis-center': { 'justify-content': 'center' }, '.main-axis-end': { 'justify-content': 'flex-end' }, '.main-axis-evenly': { 'justify-content': 'space-evenly' }, '.main-axis-normal': { 'justify-content': 'normal' }, '.main-axis-start': { 'justify-content': 'flex-start' }, }) })
- deleted 2y ago
  [deleted]
- cluckindan 2y ago
  Tailwind sure is a blight upon frontend maintainability.
  - 9dev 2y ago
    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?
    - tracker1 2y ago
      ... except for where you aren't wanting to replace.
      - 9dev 2y ago
        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.
rererereferred 2y ago
Similarly, I find confusing that the `grid-template` shorthand uses the y axis first: y1 / x1 / y2 / x2 It's also not zero based which I always forget.
cantSpellSober 2y ago
For discussion I'd argue • this name works with Grid and Flexbox • this convention matches justify-items and justify-self, which makes sense to your point I still confuse it with align-content sometimes.

freetonik 2y ago

There is probably some explanation, but in general, I find many CSS properties confusing and unintuitive: `color`, `text-align`, `position: absolute` vs `position: fixed` (absolute is still technically relative!), etc.

sureIy 2y ago
What isn't clear (even to many experts) is that certain properties change the layout model entirely and that text has its own "pushing" box that contributes to sizing.
cluckindan 2y ago
Everything is laid out on the page in a flow, according to DOM order. Think how a typewriter produces text on a page: top-down, left-to-right. This is the flow. Absolute takes the element out of the flow while relative maintains it in the flow.

sod 2y ago

I didn't confuse it since I use the mnemonic "formatting text to “justify” is horizontal in my language". Sure you can change that. But that covers the flex default behavior.

vishnuharidas 2y ago
But when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.
- rererereferred 2y ago
  I guess it makesmsense if flex-direction vertical is like switching to a vertical language.

insin 2y ago

Either Google has shifted _so much_ focus to getting an LLM to tell you about very real Encanto 2 spoilers that its search capabilities have atrophied, or my surprise at there not already being a Tailwind plugin for this is justified: const plugin = require('tailwindcss/plugin') const aliasFlexboxAlignment = plugin(function({ addUtilities }) { addUtilities({ '.cross-axis-baseline': { 'align-items': 'baseline' }, '.cross-axis-center': { 'align-items': 'center' }, '.cross-axis-end': { 'align-items': 'flex-end' }, '.cross-axis-start': { 'align-items': 'flex-start' }, '.cross-axis-stretch': { 'align-items': 'stretch' }, '.main-axis-around': { 'justify-content': 'space-around' }, '.main-axis-between': { 'justify-content': 'space-between' }, '.main-axis-center': { 'justify-content': 'center' }, '.main-axis-end': { 'justify-content': 'flex-end' }, '.main-axis-evenly': { 'justify-content': 'space-evenly' }, '.main-axis-normal': { 'justify-content': 'normal' }, '.main-axis-start': { 'justify-content': 'flex-start' }, }) })

deleted 2y ago
[deleted]
cluckindan 2y ago
Tailwind sure is a blight upon frontend maintainability.
- 9dev 2y ago
  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?
  - tracker1 2y ago
    ... except for where you aren't wanting to replace.
    - 9dev 2y ago
      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.

rererereferred 2y ago

Similarly, I find confusing that the `grid-template` shorthand uses the y axis first: y1 / x1 / y2 / x2 It's also not zero based which I always forget.

cantSpellSober 2y ago

For discussion I'd argue • this name works with Grid and Flexbox • this convention matches justify-items and justify-self, which makes sense to your point I still confuse it with align-content sometimes.