4 ms·

The creators (contributors, really) of CSS very much did figure this problem out. Their solution was creating a new paradigm. You need to regard it as differen

The creators (contributors, really) of CSS very much did figure this problem out. Their solution was creating a new paradigm. You need to regard it as different from display:block and display:inline in the same way that those are fundamentally different than display:table. CSS is capable of supporting all sorts of display models… just wait until display:grid rolls around.

lukasb 11y ago
Why not use something like display-contents:flex instead?
- bennettfeely 11y ago
  "display: flex" creates a block-level element, in other words, is the same as "display: block". There is also "display: inline-flex" which functions as an element with "display: inline". In my opinion this system is better than introducing a brand new css property. It would be redundant to have to put "display-contents: flex" along with "display: block".
- talmand 11y ago
  Because that implies you could have the display and display-contents properties have values at the same time that can conflict with each other. The thing is, display: flex does control some aspects of the element it is applied to. Because there is display: inline-flex. It is roughly the equivalent of block and inline-block. It's just an added bonus that display: flex also affects the immediate children, making them flex items to be manipulated. For instance, make a div display: table and imagine its immediate children are automatically display: table-row, or something of that nature.
  - jewbacca 11y ago
    Doesn't that redundancy kinda suggest that there are two orthogonal things going on here? ie, block | inline --------- flex | inline-flex What could you label the axes here? Or is this not a valid way to frame the relationship between these things?
    - talmand 11y ago
      I'm not sure I understand what it is your asking. I'm guessing maybe I can say flex = block and inline-flex = inline-block? Except that the flex properties also affect its immediate children.
    - DiThi 11y ago
      inline and inline-block are not the same thing. inline-flex behaves like inline-block
      - jewbacca 11y ago
        Brainfart. You're right, thank you.
amelius 11y ago
I think the most important thing to consider is "composability". I.e., that you can take a DOM-subtree from someplace, and put it somewhere else (perhaps inline) without modification. The current way CSS handles things violates this basic principle.

lukasb 11y ago

Why not use something like display-contents:flex instead?

bennettfeely 11y ago
"display: flex" creates a block-level element, in other words, is the same as "display: block". There is also "display: inline-flex" which functions as an element with "display: inline". In my opinion this system is better than introducing a brand new css property. It would be redundant to have to put "display-contents: flex" along with "display: block".
talmand 11y ago
Because that implies you could have the display and display-contents properties have values at the same time that can conflict with each other. The thing is, display: flex does control some aspects of the element it is applied to. Because there is display: inline-flex. It is roughly the equivalent of block and inline-block. It's just an added bonus that display: flex also affects the immediate children, making them flex items to be manipulated. For instance, make a div display: table and imagine its immediate children are automatically display: table-row, or something of that nature.
- jewbacca 11y ago
  Doesn't that redundancy kinda suggest that there are two orthogonal things going on here? ie, block | inline --------- flex | inline-flex What could you label the axes here? Or is this not a valid way to frame the relationship between these things?
  - talmand 11y ago
    I'm not sure I understand what it is your asking. I'm guessing maybe I can say flex = block and inline-flex = inline-block? Except that the flex properties also affect its immediate children.
  - DiThi 11y ago
    inline and inline-block are not the same thing. inline-flex behaves like inline-block
    - jewbacca 11y ago
      Brainfart. You're right, thank you.

amelius 11y ago

I think the most important thing to consider is "composability". I.e., that you can take a DOM-subtree from someplace, and put it somewhere else (perhaps inline) without modification. The current way CSS handles things violates this basic principle.