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>

jsFiddle