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

Question

在CSS flexible box layout module中，它说：

  

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

这表现得像visibility: hidden吗？如果答案是肯定的，那么为什么会引入visibility: collapse？

Answer 1

有关浏览器支持的说明： 自2017年7月12日起，Chrome 59似乎不支持visibility: collapse。代码示例如下{{ 1}}在Chrome中失败（它们的行为与collapse类似），但在Firefox和Edge中有效。

Flex项目按行或列排列，具体取决于hidden。

每行/每列都被视为flex line。

在下面的示例中，Flex容器在行方向上有四个弹性项。第四项包装，创建第二个弹性线：

＆＃13;

＆＃13;

flex-direction

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

<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应用于第三个项目时，第四个项目位于上面一行，下面一行会折叠：

＆＃13;

＆＃13;

display: none

＆＃13;

.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; }

＆＃13;

＆＃13;

＆＃13;

<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时，布局的其余部分（包括第二个柔性线）保持不变。

＆＃13;

＆＃13;

visibility: hidden

＆＃13;

.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; }

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

visibility: collapse

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

布局呈现<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;主要大小消失了，但第一行的交叉大小仍然存在。

＆＃13;

＆＃13;

visibility: collapse

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

实际上取决于元素。如果在表子元素上使用，collapse将隐藏元素及其占用的空间。

如果在不是表子元素的任何元素上使用，

collapse将表现得像hidden