What is the difference between visibility: hidden and visible: minimize to flexbox?

In the CSS flexible box module , it says:

the rolled-up flexible element is completely removed from the rendering, but leaves a "rack"

Does it behave like visibility: hidden ? If so, why was visibility: collapse introduced?

+5
source share
2 answers

Browser support note: Chrome 59 has not supported visibility: collapse since July 12, 2017. The code samples below with collapse do not work in Chrome (they behave exactly like hidden ), but they work in Firefox and Edge.


Flex items are placed in a row or column, depending on flex-direction .

Each row / column is considered a flexible line .

In the examples below, a flex container has four flex items per row. The fourth element is wrapped, creating a second flexible 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 the flex element is not displayed by the browser.

If all flex line elements have display: none , the line also collapses, which affects the rest of the layout. The surrounding elements may move when the flexible line is destroyed.

With display: none applied to the third element, the fourth element takes its place in the top row, and the bottom row 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 the flexibility element is displayed by the browser, but is completely transparent. It is hidden from view, but takes up the space that it usually uses in the layout. Consequently, the surrounding elements see this item completely intact.

In this example, when the last two blocks 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 the flex element is not displayed (the same as display: none ), but the flex algorithm checks the cross-size of the element and then uses this data to maintain a flexible line (i.e. what cross the line size will be if the element flex was visible ).

The difference with display: none is that collapse allows one part of the element - its cross-size - to be saved. This is referred to in the specification as a rack.

So, if all the flexibility elements in a line have visibility: collapse , the cross-size of the line (be it width or height) is not destroyed, and the rest of the layout does not change.

Please note that although collapse guarantees the stability of the transverse line size, it does not provide such a guarantee for the main line size. This is the key difference between collapse and hidden .

Below are some examples. (As mentioned above, they will not work in Chrome. Test in FF or Edge.)

In this example, the first two elements 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 looks like display: none . The second line collapses because the main size of the elements is gone, which allows the latter to move naturally.

In the following example, all elements get visibility: collapse . Consequently, the second line crashes because the main size of the elements 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> 

jsFiddle

+11
source

Actually it depends on the item. If used in a table collapse , collapse will hide the element, as well as the space it occupies.

collapse will behave as hidden if used for any element that is not a sub-element of the table

0
source

Source: https://habr.com/ru/post/1264248/


All Articles