Hacker News Reader

Comment by amelius | Hacker News Reader

So "display: flex" affects how items within an element are positioned, while e.g. "display: inline-block" affects how an element itself is positioned. It seems to me that this is in conflict. Am I overlooking something? Or are the creators of CSS still not able to figure these kinds of problem out?

View on HN

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.

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

"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".

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.

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?

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.

inline and inline-block are not the same thing. inline-flex behaves like inline-block

Brainfart. You're right, thank you.

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.

Reply on news.ycombinator.com