flexbox 中的可见性：隐藏和可见性：折叠有什么区别？

Question

在CSS flexible box layout module 中，它说：

折叠的弹性项目完全从渲染中移除，但留下一个“支柱”

这和visibility: hidden 一样吗？如果答案是肯定的，那为什么要引入visibility: collapse？

Answer 1

关于浏览器支持的说明：截至 2017 年 7 月，Chrome (59) 不支持 visibility: collapse。下面带有collapse 的代码示例在Firefox 和Edge 中工作，但在Chrome 中失败（它们的行为就像hidden）。更新：截至 2020 年 7 月，此注释仍然有效。 Chrome 和 Safari 将 visibility: collapse 视为 hidden。 caniuse.com

---

根据flex-direction，弹性项目按行或列布局。

每一行/每一列都被视为一个flex line。

在下面的例子中，一个弹性容器在行方向上有四个弹性项目。第四个项目换行，创建第二条柔性线：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

---

display: none

使用display: none，浏览器不会呈现弹性项目。

如果 flex 行上的所有项目都有display: none，则该行也会折叠，这会影响布局的其余部分。弯曲线折叠时，周围的元素可能会移动。

display: none 应用于第三个项目，第四个项目在上面一行的位置，下面一行折叠：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box3 { display: none; }

<code>display: none</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

---

visibility: hidden

使用visibility: hidden，弹性项目由浏览器呈现，但完全透明。它从视图中隐藏，但占用了它通常在布局中使用的空间。因此，周围的元素认为这个项目是完整的。

在本例中，当最后两个框有visibility: hidden 时，布局的其余部分（包括第二条伸缩线）保持不变。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box3 { visibility: hidden; }
.box4 { visibility: hidden; }

<code>visibility: hidden</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

---

visibility: collapse

使用visibility: collapse，不会渲染弹性项目（与display: none 相同），但弹性算法会检查项目的交叉大小，然后使用该数据来保持弹性线稳定（即交叉如果弹性项目是visible，则该行的大小将是。

与display: none 的不同之处在于collapse 允许保留一件物品（其交叉尺寸）。这在规范中被称为 strut。

因此，如果该行上的所有 flex 项目都具有 visibility: collapse，则该行的交叉大小（无论是宽度还是高度）不会折叠，并且布局的其余部分不会折叠。不受影响。

请注意，虽然collapse 保证了线的交叉尺寸的稳定性，但它对线的主要尺寸没有提供这样的保证。这是collapse 和hidden 之间的关键区别。

以下是一些示例。 （如上所述，这些在 Chrome 中不起作用。在 FF 或 Edge 中测试。）

在本例中，前两项为visibility: collapse。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1, .box2 {
  visibility: collapse;
}

<code>visibility: collapse</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

布局呈现为display: none。第二行折叠，因为项目的主要尺寸消失了，让最后一个项目自然地向上移动。

在以下示例中，所有项目都获得visibility: collapse。因此，第二行折叠，因为项目的主要尺寸消失了，但第一行的交叉尺寸仍然存在。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}
.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  visibility: collapse;
}

<code>visibility: collapse</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

jsFiddle

Answer 2

它实际上取决于元素。如果在表格子元素上使用，collapse 将隐藏该元素以及它占用的空间。

collapse 如果用于任何不是表格子元素的元素，其行为将类似于 hidden