"br"对flexbox不友好? [英] "br" is not friendly with the flexbox?

问题描述

我使用flexbox获得了一个表，并注意到了一个有趣的功能: br 元素在flexbox内不能做任何事情.

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

示例:

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

在示例中， div 和 br 共享相同的属性，但是 div 将元素转移到新行，而 br不.

In the example, div and br share the same properties, but div transfers elements to the new line, and br does not.

为什么?

推荐答案

众所周知，CSS中 br 元素的实现是个谜.不同的浏览器在元素上支持不同的属性集，以达到不同程度的效果(尽管它们都支持设置 display:none 至少将其从布局中删除).CSS本身早在CSS1之前就已经意识到了这种怪异，并专门为其提供了完整的小节，甚至在CSS3中，现在仍然严重不足.

The implementation of the br element in CSS is very well known to be quite the mystery. Different browsers support a different set of properties on the element, to varying degrees of effect (although all of them do support setting display: none to remove it from the layout at least). CSS itself acknowledges this oddity as early as CSS1, having dedicated an entire subsection to it, and even now in CSS3 it's still severely underspecified.

这种涉及flexbox的特性并不新鲜；自2014年以来， .基本上，在当前实现中， br 不会生成主体框，而是被视为连续文本的一部分，如

This peculiarity involving flexbox is not new; it has been known since 2014. Basically, in current implementations br does not generate a principal box, but is instead treated as part of a contiguous run of text as described in section 4 of the Flexbox spec, generating an anonymous flex item that cannot be styled (because it's anonymous). This is similar to an orphaned display: table-cell element causing an anonymous table box to be created around it, except you can at least 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 flex item is laid out with the defaults.

在这种情况下，由于 br 本身(大部分)为空，并且在flex容器中没有任何其他裸文本的陪伴，因此这将导致匿名的flex项目没有尺寸，从而似乎 br 元素完全消失了.

In this case, since br itself is (mostly) empty and it is not being accompanied by any other bare text within the flex container, this results in an anonymous flex item with no dimensions, making it seem as though the br element has vanished completely.

早在2014年CSSWG 已解决此之谜"，而不是通过更改Flexbox规范，而只是将 br 元素的特殊定义添加到css-display-3，以解决此处看到的行为.但是当前版本中没有这样的定义规范，也 FPWD (解析度之后！)，HTML规范或其他任何地方.尽管如此，根据当前的css-display-3规范(未定义任何新属性，只是更改了 display 的定义)，该定义看起来像这样:

Back in 2014 the CSSWG resolved this "mystery" not by changing the Flexbox spec, but simply to add a special definition for the br element to css-display-3 to account for the behavior seen here. But no such definition exists in the current version of that spec, nor the FPWD (which was published after the resolution!), nor the HTML spec, nor anywhere else. Nevertheless, the definition looks like this in terms of the current css-display-3 spec (which does not define any new properties, just changes the definition of display):

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

...表示 br 元素不会生成主体框，而只会生成包含单个换行符的匿名内联框.

... which means that the br element doesn't generate a principal box, but simply an anonymous inline box containing a single newline.

由于css-display-3仍然缺少此定义，因此我暂时不会立即考虑.即使如此，考虑到 br 元素已经存在了这么长时间，此处看到的行为极不可能改变.

Because this definition is still missing from css-display-3, I wouldn't immediately consider it canon just yet. Even so, the behavior seen here is extremely unlikely to change considering this is how the br element has been for so long.

这篇关于"br"对flexbox不友好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！