¿Qué efecto tiene establecer display: flex en un elemento?
display: flex
Todos los elementos hijos se convierten permanentemente en texto inline simple.
Todos los descendientes, sin importar el nivel de anidamiento, se convierten en elementos de un único diseño flex compartido.
El elemento se convierte en un contenedor flex y sus hijos directos se convierten en elementos flex.
El elemento y todos sus hijos quedan ocultos.