html - "br"对 flexbox 不友好？

Question

我得到了一个使用 flexbox 的表格，并注意到一个有趣的特性:br 元素不能在 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 没有。

为什么？

Answer 1

众所周知，CSS 中br 元素的实现非常神秘。不同的浏览器支持元素的一组不同的属性，影响程度不同(尽管它们都支持设置 display: none 至少将其从布局中删除)。 CSS 本身早在 CSS1 就承认了这种怪异，并专门提供了 an entire subsection to it ，甚至现在在 CSS3 中，它仍然严重未指定。

这种涉及 flexbox 的特性并不新鲜；已知since 2014 .基本上，在当前的实现中，br 不会生成主体框，而是被视为连续文本运行的一部分，如 section 4 of the Flexbox spec 中所述。 ，生成一个匿名 flex 元素不能设置样式(因为它是匿名的)。这类似于一个孤立的 display: table-cell 元素导致围绕它创建一个匿名表格框，除了你至少仍然可以设置 display: table-cell 的样式元素 — 在 br 元素的情况下，您应用的样式属性无效，并且匿名 flex 元素使用默认值布局。

在这种情况下，由于 br 本身(大部分)是空的，并且在 flex 容器中没有伴随任何其他纯文本，这会导致一个没有尺寸的匿名 flex 元素，使得br 元素似乎完全消失了。

早在 2014 年，CS​​SWG resolved这个“谜团”不是通过改变 Flexbox 规范来实现的，而是简单地为 br 元素添加一个特殊定义到 css-display-3 来说明这里看到的行为。但是 current version 中不存在这样的定义该规范，也不是FPWD (在决议之后发布!)，也不是 HTML 规范，也不是其他任何地方。尽管如此，根据当前的 css-display-3 规范(它没有定义任何新属性，只是更改了 display 的定义)定义看起来像这样:

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

... 这意味着 br 元素 doesn't generate a principal box , 而只是一个包含单个换行符的匿名内联框。

因为 css-display-3 中仍然缺少这个定义，所以我不会立即将其视为佳能。即便如此，考虑到 br 元素长期以来一直如此，这里看到的行为极不可能改变。