the collapsed flex item is removed from rendering entirely,but leaves behind a “strut”
这表现得像是可见性：隐藏吗？如果答案是肯定的,那么为什么能见度：崩溃引入？
解决方法
Flex项目按行或列排列,具体取决于flex-direction.
每行/每列被视为flex line.
在下面的示例中,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;
}
<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,浏览器不会呈现弹性项目.
如果弹性线上的所有项目都显示为：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时,浏览器会呈现一个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; }
<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>
能见度：崩溃
随着可见性：折叠,不渲染弹性项目(与display：none相同),但flex算法检查项目的交叉大小,然后使用该数据保持弹性线稳定(即,交叉大小的大小)如果弹性项目可见,则为line).
与display：none的区别在于,折叠允许保留项目的一个部分 – 其交叉大小.这在规范中称为支柱.
因此,如果线上的所有弹性项都具有可见性：折叠,则线的交叉大小(无论是宽度还是高度)不会折叠,并且布局的其余部分不会受到影响.
请注意,尽管折叠可确保线的交叉尺寸的稳定性,但它不能确保线的主要尺寸.这是崩溃和隐藏之间的关键区别.
以下是一些例子. (如上所述,这些在Chrome中不起作用.在FF或Edge中测试.)
在此示例中,前两个项目具有可见性：折叠.
.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.第二行折叠,因为项目的主要大小消失,允许最后一项自然向上移动.
在以下示例中,所有项目都可见：崩溃.因此,第二行折叠是因为项目的主要大小消失了,但第一行的交叉大小仍然存在.
.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>
