在 flexbox 中可见性:隐藏和可见性:折叠有什么区别?
[英] What's the difference between visibility: hidden and visibility: collapse in flexbox?
本文介绍了在 flexbox 中可见性:隐藏和可见性:折叠有什么区别?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在 CSS 弹性框布局模块中，说:
<块引用>
折叠的 flex 项目从渲染中完全移除，但留下了一个支柱"
这是否和 visibility: hidden 一样?如果答案是肯定的，那么为什么要引入 visibility: collapse ?
解决方案
关于浏览器支持的说明: 截至 2017 年 7 月，Chrome (59) 不支持 可见性:折叠.下面带有 collapse 的代码示例在 Firefox 和 Edge 中有效，但在 Chrome 中失败(它们的行为就像 hidden).更新:截至 2020 年 7 月，此注释仍然有效.Chrome 和 Safari 将 visibility: collapse 视为 hidden.caniuse.com
Flex 项目按行或列布置，具体取决于 flex-direction.
每一行/每一列都被视为一个弹性线.
在下面的例子中，一个弹性容器在行方向有四个弹性项目.第四项换行，创建第二条弹性线:
.container {显示:弹性；flex-wrap: 包裹;宽度:200px；边框:1px 黑色虚线；}.盒子 {高度:50px；弹性:0 0 50px；边距:5px；背景颜色:浅绿色；显示:弹性；对齐内容:居中；对齐项目:居中；}
<div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div>
显示:无
使用 display: none，浏览器不会渲染弹性项目.
如果 flex 行上的所有项目都具有 display: none，则该行也会折叠，这会影响布局的其余部分.当伸缩线折叠时，周围的元素可能会移动.
将 display: none 应用到第三个项目，第四个项目占据上一行，下一行折叠起来:
.container {显示:弹性；flex-wrap: 包裹;宽度:200px；边框:1px 黑色虚线；}.盒子 {高度:50px；弹性:0 0 50px；边距:5px；背景颜色:浅绿色；显示:弹性；对齐内容:居中；对齐项目:居中；}.box3 { 显示:无；}
display: none<div class="容器"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div>
可见性:隐藏
使用 visibility: hidden，一个 flex 项目由浏览器呈现但完全透明.它隐藏在视图中，但占用了它通常在布局中使用的空间.因此，周围的元素会将此项视为完整无缺.
在此示例中，当最后两个框具有 visibility: hidden 时，布局的其余部分(包括第二条伸缩线)保持不变.
.container {显示:弹性；flex-wrap: 包裹;宽度:200px；边框:1px 黑色虚线；}.盒子 {高度:50px；弹性:0 0 50px；边距:5px；背景颜色:浅绿色；显示:弹性；对齐内容:居中；对齐项目:居中；}.box3 { 可见性:隐藏；}.box4 { 可见性:隐藏；}
visibility: hidden<div class="容器"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div>
可见性:折叠
使用 visibility: collapse，不会渲染 flex item(与 display: none 相同)，但 flex 算法会检查 item 的 cross size，然后使用保持弹性线稳定的数据(即，如果弹性项目visible，线的交叉尺寸是多少).
与display: none 的区别在于collapse 允许保留项目的一部分——它的交叉尺寸.这在规范中称为 strut.
因此，如果该行上的所有 flex 项都具有 visibility: collapse，则该行的横向尺寸(无论是宽度还是高度)不会折叠，并且布局的其余部分不受影响.
注意，虽然collapse保证了线的横向尺寸的稳定性，但它并没有为线的主要尺寸提供这样的保证.这是 collapse 和 hidden 之间的主要区别.
以下是一些示例.(如上所述，这些在 Chrome 中不起作用.在 FF 或 Edge 中测试.)
在本例中，前两项具有 visibility: collapse.
.container {显示:弹性；flex-wrap: 包裹;宽度:200px；边框:1px 黑色虚线；}.盒子 {高度:50px；弹性:0 0 50px；边距:5px；背景颜色:浅绿色；显示:弹性；对齐内容:居中；对齐项目:居中；}.box1, .box2 {能见度:崩溃；}
visibility:collapse<div class="容器"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div>
布局呈现为 display: none.第二行折叠，因为项目的主要大小没有了，让最后一个项目自然向上移动.
在以下示例中，所有项目都获得 visibility: collapse.因此，由于项目的主要尺寸消失，第二行折叠，但第一行的交叉尺寸仍然存在.
.container {显示:弹性；flex-wrap: 包裹;宽度:200px；边框:1px 黑色虚线；}.盒子 {高度:50px；弹性:0 0 50px；边距:5px；背景颜色:浅绿色；显示:弹性；对齐内容:居中；对齐项目:居中；}.盒子 {能见度:崩溃；}
visibility:collapse<div class="容器"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div>
In the CSS flexible box layout module, it says:
the collapsed flex item is removed from rendering entirely, but leaves behind a "strut"
Does that behave just like visibility: hidden? If the answer is yes, then why was visibility: collapse introduced?
解决方案
Note on browser support: As of July 2017, Chrome (59) does not support visibility: collapse. The code samples below with collapse work in Firefox and Edge, but fail in Chrome (they behave just like hidden). UPDATE: As of July 2020, this is note is still valid. Chrome and Safari treat visibility: collapse like hidden. caniuse.com
Flex items are laid out in a row or column, depending on flex-direction.
Each row / column is considered a flex line.
In the examples below, a flex container has four flex items in row-direction. The fourth item wraps, creating a second 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
With display: none, a flex item isn't rendered by the browser.
If all items on the flex line have display: none, the line also collapses, which affects the rest of the layout. Surrounding elements may shift when a flex line collapses.
With display: none applied to the third item, the fourth item takes its place on the upper line, and the lower line collapses:
.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
With visibility: hidden, a flex item is rendered by the browser but is fully transparent. It's hidden from view but takes up the space it would normally use in the layout. Hence, surrounding elements see this item as fully intact.
In this example, when the last two boxes have visibility: hidden, the rest of the layout (including the second flex line) remains unchanged.
.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
With visibility: collapse, a flex item is not rendered (same as display: none), but the flex algorithm checks the cross size of the item and then uses that data to keep the flex line stable (i.e., what the cross size of the line would be if the flex item was visible).
The difference with display: none is that collapse allows one piece of the item – its cross size – to be preserved. This is referred to in the spec as the strut.
So if all flex items on the line have visibility: collapse, the cross size of the line (whether it be the width or height) does not collapse, and the rest of the layout isn't affected.
Note that although collapse guarantees the stability of the line's cross size, it provides no such assurance for the line's main size. This is a key difference between collapse and hidden.
Below are some examples. (As mentioned above, these won't work in Chrome. Test in FF or Edge.)
In this example, the first two items have 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>
The layout renders like display: none. The second line collapses because the main size of the items is gone, allowing the last item to move up naturally.
In the following example, all items get visibility: collapse. Hence, the second line collapses because the items' main size is gone, but the cross size of the first line remains.
.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>
这篇关于在 flexbox 中可见性:隐藏和可见性:折叠有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
