Quelle est la différence entre visibilité: cachée et visibilité: effondrement dans flexbox?
Dans le module de présentation de boîtes flexibles CSS , il est indiqué:
l'élément flex réduit est totalement supprimé du rendu, mais laisse une "jambe de force"
Est-ce que cela se comporte exactement comme visibility: hidden? Si la réponse est oui, alors pourquoi visibility: collapse a-t-il été introduit?
Remarque sur la prise en charge du navigateur: _ Chrome 59 ne semble pas prendre en charge visibility: collapse à partir du 12 juillet 2017. Les exemples de code ci-dessous avec collapse échouent dans Chrome (ils se comportent exactement comme hidden), mais travailler dans Firefox et Edge.
Les éléments Flex sont disposés dans une rangée ou une colonne, en fonction de flex-direction.
Chaque ligne/colonne est considérée comme un ligne flexible .
Dans les exemples ci-dessous, un conteneur flexible comporte quatre éléments flexibles dans le sens des lignes. Le quatrième article se termine, créant une deuxième ligne de flexion:
.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
Avec display: none, un élément flexible n'est pas rendu par le navigateur.
Si tous les éléments de la ligne flexible ont display: none, la ligne se réduit également, ce qui affecte le reste de la présentation. Les éléments environnants peuvent se déplacer lorsqu'une ligne de flexion s'effondre.
Avec display: none appliqué au troisième élément, le quatrième élément prend sa place sur la ligne supérieure et la ligne inférieure est réduite:
.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
Avec visibility: hidden, un élément flex est rendu par le navigateur mais est totalement transparent. Il est caché mais occupe tout l'espace qu'il utiliserait normalement dans la mise en page. Par conséquent, les éléments environnants voient cet élément comme entièrement intact.
Dans cet exemple, lorsque les deux dernières zones ont visibility: hidden, le reste de la présentation (y compris la deuxième ligne de flexion) reste inchangé.
.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
Avec visibility: collapse, aucun élément flex n’est rendu (identique à display: none), mais l’algorithme flex vérifie la taille croisée de l’élément, puis utilise ces données pour maintenir la ligne de flex stable (c'est-à-dire quelle serait la taille croisée de la ligne si l'élément flex était visible).
La différence avec display: none est que collapse permet de conserver un élément de l'élément, sa taille de croix. Ceci est désigné dans la spécification sous le nom de strut.
Ainsi, si tous les éléments flexibles de la ligne ont visibility: collapse, la taille transversale de la ligne (que ce soit la largeur ou la hauteur) ne le fait pas est réduite, et le reste de la présentation n'est pas affecté.
Notez que, bien que collapse garantisse la stabilité de la taille croisée de la ligne, elle ne fournit aucune assurance de ce type quant à la taille principale de la ligne. C'est une différence clé entre collapse et hidden.
Ci-dessous quelques exemples. (Comme mentionné ci-dessus, cela ne fonctionnera pas dans Chrome. Testez dans FF ou Edge.)
Dans cet exemple, les deux premiers éléments ont 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>La mise en page se présente comme display: none. La deuxième ligne est réduite parce que la taille principale des éléments a disparu, ce qui permet au dernier élément de monter naturellement.
Dans l'exemple suivant, tous les éléments reçoivent visibility: collapse. Par conséquent, la deuxième ligne se réduit car la taille principale des éléments a disparu, mais la taille croisée de la première ligne reste.
.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
Cela dépend de l'élément. Si utilisé sur un sous-élément de table, collapse masquera l'élément ainsi que l'espace qu'il occupait.
collapse se comportera comme hidden si utilisé sur n'importe quel élément qui n'est pas un sous-élément de table