在CSS flexible box layout module中，它说：
折叠的弹性项目完全从渲染中删除，但留下了“支柱”
这表现得像visibility: hidden吗？如果答案是肯定的，那么为什么会引入visibility: collapse？
答案 0 :(得分：15)
有关浏览器支持的说明： 自2017年7月12日起，Chrome 59似乎不支持visibility: collapse。代码示例如下{{ 1}}在Chrome中失败（它们的行为与collapse类似），但在Firefox和Edge中有效。
Flex项目按行或列排列，具体取决于hidden。
每行/每列都被视为flex line。
在下面的示例中，Flex容器在行方向上有四个弹性项。第四项包装，创建第二个弹性线：
flex-direction.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，则该线条也会折叠，这会影响布局的其余部分。当柔性线折叠时，周围的元素可能会发生偏移。
将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相同），但是flex算法会检查项目的交叉大小，然后使用该数据来保持弹性线稳定（即，如果flex项为display: none），那么该行的交叉大小。
与visible的区别在于display: none允许保留项目的一个部分 - 其交叉大小。这在规范中被称为 strut 。
因此，如果该行上的所有弹性项目都为collapse，则该行的十字大小（无论是宽度还是高度）不会折叠，其余布局没有受到影响。
请注意，虽然visibility: collapse可以保证线条交叉尺寸的稳定性，但它并未对线条的主要尺寸提供此类保证。这是collapse和collapse之间的关键区别。
以下是一些例子。 （如上所述，这些在Chrome中无法使用。在FF或Edge中测试。）
在此示例中，前两项包含hidden。
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。因此，第二行崩溃，因为项目＆＃39;主要大小消失了，但第一行的交叉大小仍然存在。
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;
}
答案 1 :(得分：0)
实际上取决于元素。如果在表子元素上使用，collapse将隐藏元素及其占用的空间。
collapse将表现得像hidden