css - start - flexbox school
¿Cuál es la diferencia entre visibilidad: oculta y visibilidad: colapso en flexbox? (2)
De hecho, depende del elemento. Si se usa en un subelemento de la tabla, el collapse ocultará el elemento así como el espacio que ocupó.
collapse se comportará como hidden si se usa en cualquier elemento que no sea un subelemento de la tabla
En el módulo de diseño de caja flexible de CSS , dice:
el elemento flexible plegado se elimina de la representación por completo, pero deja un "puntal"
¿Eso se comporta como la visibility: hidden ? Si la respuesta es sí, entonces ¿por qué se presentó visibility: collapse ?
Nota sobre compatibilidad con el navegador: Chrome 59 no parece admitir visibility: collapse partir del 12 de julio de 2017. Los ejemplos de código siguientes con collapse fallan en Chrome (se comportan como hidden ), pero funcionan en Firefox y Edge.
Los elementos flexibles se disponen en una fila o columna, según flex-direction .
Cada fila / columna se considera una línea flexible .
En los ejemplos siguientes, un contenedor flexible tiene cuatro elementos flexibles en dirección de fila. El cuarto elemento se ajusta, creando una segunda línea flexible:
.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
Con display: none , el navegador no muestra un elemento flexible.
Si todos los elementos en la línea flexible tienen display: none , la línea también colapsa, lo que afecta el resto del diseño. Los elementos circundantes pueden cambiar cuando una línea flexible se colapsa.
Con display: none aplicada al tercer elemento, el cuarto elemento toma su lugar en la línea superior, y la línea inferior colapsa:
.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
Con visibility: hidden , el navegador representa un elemento flexible pero es completamente transparente. Está oculto a la vista, pero ocupa el espacio que normalmente usaría en el diseño. Por lo tanto, los elementos circundantes ven este elemento como completamente intacto.
En este ejemplo, cuando los últimos dos cuadros tienen visibility: hidden , el resto del diseño (incluida la segunda línea flexible) permanece sin cambios.
.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
Con visibility: collapse , un elemento flexible no se representa (igual que display: none ), pero el algoritmo flexible verifica el tamaño cruzado del elemento y luego utiliza esa información para mantener estable la línea flexible (es decir, cuál es el tamaño cruzado del elemento). línea sería si el elemento flexible fuera visible ).
La diferencia con la display: none es que el collapse permita conservar una pieza del artículo, su tamaño cruzado. Esto se conoce en la especificación como el puntal .
Entonces, si todos los elementos flexibles en la línea tienen visibility: collapse , el tamaño cruzado de la línea (ya sea el ancho o alto) no se contrae, y el resto del diseño no se ve afectado.
Tenga en cuenta que aunque el collapse garantiza la estabilidad del tamaño cruzado de la línea, no ofrece esa seguridad para el tamaño principal de la línea. Esta es una diferencia clave entre el collapse y hidden .
A continuación hay algunos ejemplos. (Como se mencionó anteriormente, estos no funcionarán en Chrome. Prueba en FF o Edge).
En este ejemplo, los dos primeros elementos tienen 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>
El diseño se representa como display: none . La segunda línea colapsa porque el tamaño principal de los elementos se ha ido, lo que permite que el último elemento se mueva naturalmente.
En el siguiente ejemplo, todos los elementos obtienen visibility: collapse . Por lo tanto, la segunda línea se colapsa porque el tamaño principal de los artículos se ha ido, pero el tamaño cruzado de la primera línea permanece.
.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>