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

如果用于非表格子元素上，collapse将像hidden一样行为。

浏览器支持注意事项：截至2017年7月，Chrome（59）不支持visibility: collapse。下面带有collapse的代码示例适用于Firefox和Edge，但在Chrome中失败（它们表现得像hidden）。更新：截至2020年7月，此说明仍然有效。Chrome和Safari将visibility: collapse视为hidden。caniuse.com

Flex项按行或列布局，具体取决于flex-direction。

每行/列被视为flex行。

在下面的示例中，flex容器在行方向上有四个flex项。第四项换行，创建第二个flex行：

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

  1
  2
  3
  4

display: none

使用display: none，浏览器不会呈现flex项。

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

将第三个项目应用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; }

display: none
  1
  2
  3
  4

visibility: hidden

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

在此示例中，当最后两个框具有visibility: hidden时，布局的其余部分（包括第二个flex行）保持不变。

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

visibility: hidden
  1
  2
  3
  4

visibility: collapse

使用visibility: collapse，flex项不被呈现（与display: none相同），但是flex算法检查该项的交叉大小，然后使用该数据来保持flex行稳定（即，如果flex项是visible，则该行的交叉大小）。

与display: none的区别是collapse允许保留该项的一个部分-其交叉大小。在规范中，这称为支撑杆。

因此，如果该行上的所有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;
}

visibility: collapse
  1
  2
  3
  4

布局呈现为"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;
}

visibility: collapse
  1
  2
  3
  4

jsFiddle的链接：https://jsfiddle.net/rh8mqLpn/