可见性之间有什么区别:隐藏和可见性:在flexbox中崩溃？

Question

在CSS flexible框布局模块中,它说:

折叠的弹性项目完全从渲染中删除,但留下了"支柱"

这表现得像visibility: hidden吗？如果答案是肯定的,那么为什么要visibility: collapse介绍？

Answer 1

关于浏览器支持的注意事项: Chrome 59自visibility: collapse2017年7月12日起似乎不支持.下面的代码示例collapse在Chrome中失败(它们的行为就像hidden),但在Firefox和Edge中工作.

Flex项目按行或列排列,具体取决于flex-direction.

每行/列都被视为弹性线.

在下面的示例中,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

使用时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,不会渲染弹性项目(与之相同display: none),但是flex算法会检查项目的交叉大小,然后使用该数据来保持弹性线的稳定(即,如果弹性线,则线条的交叉大小是多少)项目是visible).

与之不同的display: none是,collapse允许保留项目的一部分 - 其交叉大小.这在规范中称为支柱.

因此,如果线上的所有弹性项目都有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;
}

<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.第二行折叠,因为项目的主要大小消失,允许最后一项自然向上移动.

在以下示例中,所有项目都获得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;
}

<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>

的jsfiddle