主页 / 问题 / 690569
Accepted
Yuri
Asked:2020-07-11 00:41:59 +0000 UTC2020-07-11 00:41:59 +0000 UTC

br对flexbox不友好？

  • 772

我正在使用 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>Перенос с помощью div'a:</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>Перенос с помощью 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 则没有。

为什么？

css

3 个回答

  1. Best Answer

    br众所周知，CSS 中元素的实现是个谜。不同的浏览器对该元素支持不同的属性，效果也不同（尽管它们都支持从布局display: none中移除）。brCSS 本身在 CSS1 中通过专门为其指定了一个小节来识别这种奇怪现象，甚至现在 CSS3 仍然列出了它。

    flexbox 的这个特性并不新鲜；自 2014 年以来，人们就知道她了。基本上，在当前的实现中，br不创建主框，而是将其视为连续文本的一部分，如Flexbox 规范第 4 节所述，创建一个无法设置样式的不可见元素（因为它是不可见的）。这类似于display: table-cell导致围绕自身创建匿名表的元素，即使您仍然可以设置元素的样式display: table-cell- 在元素的情况下br。您应用的样式属性无效，不可见元素的设置设置为默认值。

    在这种情况下，因为它br（大部分）是空的，并且在 flex 中没有任何属性，这会导致不可见的 flex 元素没有尺寸或“权利”，因此该br元素看起来完全消失了。

    早在 2014 年，CS​​SWG 就没有通过更改 Flexbox 规范来解开这个谜团，而是通过简单地为 css-display-3 添加自定义定义br来解释我们所看到的行为。但是这样的定义在规范的当前版本中不存在，FPWD（在决议之后发布！）、HTML 规范也不存在，在其他任何地方也不存在。但是，定义看起来像当前的 css-display-3 规范（没有定义任何新属性，只是更改了定义display）：

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

    ...这意味着该元素br 不会创建一个主块，而只是一个包含单个换行符的不可见内联块。

    由于 css-display-3 中仍然缺少此定义，因此我暂时不会深入探讨。

    来自@BoltClock 的回应

    • 8

  2. 泷忍：

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

br {
  content:'ПОЖАЛУЙСТА, ПЕРЕНЕСИ НА ДРУГУЮ СТРОКУ!';
}
    <p>Перенос с помощью div'a:</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>Перенос с помощью br:</p>
<div class="flexbox">
<div class="item"></div>
  <div class="item"></div>
  <br>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 7

  3. br 标签没有自己的宽度和高度，应用 flex 属性后，它与其他标签保持一致。在第一个示例中，您将块拉伸到它的全宽，让它填满整条线。使用 br，这个技巧将不起作用。

    • 1

相关问题