css - What's the difference between visibility: hidden and visibility: collapse in flexbox?

Question

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?

Answer 1

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>