"br" not friendly with flexbox?

Question

I got the table using flexbox and noticed one interesting feature: the br element cannot do anything inside flexbox.

Example:

 .flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: 50px; height: 50px; margin: 2px; border: 2px solid blue; } .new-row, br { display: block; width: 100%; height: 0px; } 

 <p>Line break using div:</p> <div class="flexbox"> <div class="item"></div> <div class="item"></div> <div class="new-row"></div> <div class="item"></div> <div class="item"></div> </div> <p>Line break using br:</p> <div class="flexbox"> <div class="item"></div> <div class="item"></div> <br> <div class="item"></div> <div class="item"></div> </div> 

In the example, div and br use the same properties, but div passes elements to a new line, but br does not.

Why?

Answer 1

The implementation of the br element in CSS is very well known as mystery. Different browsers support a different set of properties for the element, with varying degrees of effect (although they all support the display: none setting to remove it from the layout, at least). CSS itself recognizes this oddity back in CSS1, highlighting the entire subsection for it , and even now in CSS3 it is still strongly rejected.

This flexbox feature is not new; since 2014 it has been known . Basically, in current implementations, br does not generate a main block, but instead is seen as part of a continuous run of text, as described in the section of the flexbox spec section , creating an anonymous flexibility element that cannot be styled (because it is anonymous). It looks like an orphaned display: table-cell element, creating an anonymous column around it, except that you can still style the display: table-cell element - in the case of the br element, the style properties you apply have no effect. and the anonymous flexibility element is exposed with default settings.

In this case, since br itself is (mostly) empty, and it is not accompanied by any other voice in the flex container, this results in an anonymous flex element without any dimensions, which seems the br element has completely disappeared.

In 2014, CSSWG did not resolve this “mystery” by changing the flexbox specification, but simply to add a special definition for br in css-display-3 to account for the behavior observed here. But such a definition does not exist in the current version of this specification, but FPWD (which was published after permission!), Neither the HTML specification, nor anywhere else. However, the definition looks like this in terms of the current css-display-3 specification (which does not define any new properties, just changes the display definition):

 br { content: '\A'; display: contents; white-space: pre; } 

... which means that the br element does not create the main block , but simply an anonymous inline block containing one newline character.

Since this definition is still missing in css-display-3, I would not consider it yet for some reason. However, the behavior observed here is highly unlikely, since this is how the br element has been for so long.