On: Flexbox Froggy: A game for learning CSS flexbox

[lukasb]

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

[talmand → lukasb]

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.

[gadtfly → talmand]

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 → gadtfly]

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 → gadtfly]

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

[gadtfly → DiThi]

Brainfart. You're right, thank you.

[bennettfeely → lukasb]

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