html - playground - “br”与flexbox不友好?



flexbox布局 (1)

我得到了一个使用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>

在这个例子中, divbr共享相同的属性,但div将元素传递到新行,而br不会。

为什么?


在CSS中的br元素的实现是非常知名的相当神秘。 不同的浏览器在元素上支持不同的属性集合,以达到不同程度的效果(尽管所有这些属性都支持设置display: none ,至少可以将其从布局中移除)。 CSS早在CSS1就已经承认了这个奇怪的现象, 把它全部分成了一个小部分 ,甚至现在在CSS3中,它仍然被严格地忽略了。

涉及到flexbox的这个特点并不新鲜。 自2014年以来就已经知道了。 基本上,在当前实现中, br不会生成主体框,而是被视为Flexbox规范的第4部分中所述的文本的连续运行的一部分,从而生成无法样式化的匿名Flex项(因为它是匿名的)。 这与孤立的display: table-cell类似display: table-cell元素会在其周围创建一个匿名表格框,除非您至少仍可以display: table-cell样式display: table-cell元素 - 在br元素的情况下,样式属性为申请没有效果,匿名弹性项目与默认设置。

在这种情况下,由于br本身(大部分是空的),并且没有在flex容器中附带任何其他裸文本,所以这导致匿名的flex项目没有尺寸,看起来好像br元素已经完全消失。

早在2014年,CSSWG就不是通过改变Flexbox规范来解决这个“谜团”,而是简单地将br元素的特殊定义添加到css-display-3中,以解释这里所看到的行为。 但是在当前版本的规范中没有这样的定义,也没有FPWD (在决议发布),也没有HTML规范,也没有其他地方。 不过,按照当前的css-display-3规范(没有定义任何新的属性,只是改变了display的定义),定义看起来像这样:

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

...这意味着br元素不会生成主体框 ,而只是包含单个换行符的匿名行内框。

因为这个定义仍然是从css-display-3中缺少的,所以我现在不会马上考虑这个定义。 即便如此,这里看到的行为是不可能改变的,考虑到br元素已经这么久了。





flexbox