Tengo un simple fichero css con un estilo general y un @media para que cuando la pantalla sea pequeña (320x480 px) la disposición de los items dentro del flexbox cambie de row a column.
Código CSS:
Ver original*{
margin:0;
border:0;
padding:0;
}
@media all and (max-width: 320px) and (max-height: 480px){
#flexbox{
flex-direction: column;
}
.nav{
display:none;
}
}
#flexbox{
//height:500px;
display: flex;
//direccion del eje principal
flex-direction: row;
//si los items sobrepasan el ancho de la pantalla
flex-wrap:wrap;
//los items a lo largo del eje principal
justify-content:center;
//los items verticanlmente
align-items:baseline;
}
.nav{
display: flex;
width:100%;
flex-direction: row;
justify-content:center;
align-self:center;
}
.nav ul li{
display:inline;
}
El problema es que la primera vez que refresqué el navegador Firefox y aplicar la vista de la pantalla 320x480 sí hizo el efecto deseado de poner los items en columna en vez de en fila.
Pero cuando volví a refrescar al rato, después de haber hecho unos cambios y deshacerlos, ya no hacía ese efecto. Es más, ese es todo el estilo que tengo hasta ahora y sigue sin hacer el efecto.
¿Alguien podría ayudarme con este problema?
Saludos.