In flexbox, why do we define the container and not the elements themselves?

Question

I am trying to understand the flex property.

Why do we apply float and display: inline-block to elements that are nested inside the container, and with display: flex we define the container itself? How should the elements inside be display:block and still be on the same line?

 .flex { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; } @media (max-width: 600px) { .flex { flex-direction: column; } } #aaa { border: 3px solid black; flex: 2; } #aa { border: 3px solid black; flex: 1; } #a { border: 3px solid black; flex: 1; } #bbb { width: 300px; } #ccc { float: left; border: 5px solid yellow; width: 200px; } #ddd { clear: both; } .one { background: red; height: 50px } .two { background: green; height: 50px } .tree { background: blue; height: 50px } #eee { display: inline-block; width: 200px; } 

 <div class=flex> <div id=a class="one">flex</div> <div id=aa class="two">flex</div> <div id=aaa class="tree">flex</div> </div> <div class=block> <div id=bbb class="one">block</div> <div id=bbb class="two">block</div> <div id=bbb class="tree">block</div> </div> <div class=float> <div id=ccc class="one">float</div> <div id=ccc class="two">float</div> <div id=ccc class="tree">float</div> </div> <div class=block> <div id=ddd class="one">block</div> <div id=ddd class="two">block</div> <div id=ddd class="tree">block</div> </div> <div class=block> <div id=eee class="one">block</div> <div id=eee class="two">block</div> <div id=eee class="tree">block</div> </div> 

CodePen Demo

Answer 1

In flexbox, why do we define the container and not the elements themselves?

The reason is twofold:

• Flex containers are the only things that can appear as children, since only flexible containers generate a flexible layout.
• Unlike anonymous block blocks and anonymous table boxes, there are no such boxes as anonymous flex container containers.

So, the hypothetical display: flex-item does not work if the item’s parent was not a flexibility container, and since each child of the flexible container automatically becomes a flexibility item, this makes this type of display completely redundant.

Level and embedded level blocks, on the other hand, exist in many, many forms . Even flexible containers can appear in block and inline forms, like display: flex and display: inline-flex respectively. In addition, display: block and display: inline-block really have a lot in common , as they are block containers. The only difference is that one is block and the other is inline-level (and the latter always creates a block formatting context, but this does not apply to it).

So, display: block and display: inline-block are actually very similar to display: flex and display: inline-flex respectively in this respect (see Difference between display: inline-flex and display: flex ), the difference is that the previous couple handles a block layout or inline layout (see section 9.2 of the CSS2 specification ), and the last couple handles an extremely flexible layout.

If you ask why flexbox was designed in such a way, something only CSSWG can answer with confidence, but I can give a reasonable assumption based on what I said above: Since block and inline- (blocks, table, flex, mesh etc.), defining floppy-level mappings for each type of layout will become extremely cumbersome even if they introduced the concept of anonymous flex containers that would allow elements to exist as flexible elements in their own right. That's why css-display-3 overrides the display property to take the form of <display-outside> <display-inside> , as well as special and obsolete values ​​- to accommodate new types of layouts without having to redefine whole sets of keywords to go along with them .

The flexibility of display: block simply because their specified display value. But they are laid out as flexible elements that always obey a set of rules in a flexible layout, which are freely based on a combination of various elements of the block and embedded layout, without falling directly into the area of ​​one of them. This is similar to how a float or absolutely positioned element cannot be inline even if you specify display: inline or display: inline-block - because floats and absolutely positioned elements always participate in the block layout, there is never an inline layout.

Speaking of floats, FYI, floats participate in block formatting contexts and therefore are part of a specific subset of the block layout. They follow the floating point model, but the floating point model is integrated with the rest of the block layout, and does not exist as a completely separate layout type.