CSS Flex Responsivo
Caja flexible receptiva
Aprendió del capítulo Consultas de medios CSS que puede usar consultas de medios para crear diferentes diseños para diferentes dispositivos y tamaños de pantalla.
Computadoras portátiles y de escritorio:
Móviles y
:Por ejemplo, si desea crear un diseño de dos columnas para la mayoría de los tamaños de pantalla y un diseño de una columna para pantallas pequeñas (como teléfonos y tabletas), puede cambiar el flex-direction
de row
a column
en un punto de interrupción específico (800 px en el ejemplo a continuación):
Ejemplo
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Otra forma es cambiar el porcentaje de la flex
propiedad de los elementos flexibles para crear diferentes diseños para diferentes tamaños de pantalla. Tenga en cuenta que también tenemos que incluir flex-wrap: wrap;
en el contenedor flexible para que este ejemplo funcione:
Ejemplo
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Galería de imágenes receptivas usando Flexbox
Use flexbox para crear una galería de imágenes receptiva que varía entre cuatro, dos o imágenes de ancho completo, según el tamaño de la pantalla:
Sitio web receptivo usando Flexbox
Use flexbox para crear un sitio web receptivo, que contenga una barra de navegación flexible y contenido flexible: