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>