Diseño web receptivo usando FlexBox | Explicado

Un diseño web receptivo se conoce como un diseño que cambia su diseño dependiendo del entorno en el que se está utilizando. Por entorno, nos referimos a que el comportamiento del sitio web cambiará según el tamaño de la pantalla del dispositivo, el ancho, la resolución, la orientación, etc. Hay muchas maneras con las que puede hacer que su sitio web responda, como consultas de medios, red, flexbox, etc. El enfoque de este artículo estará en cómo hacer que su diseño web responda usando FlexBox.

Diseño web receptivo con FlexBox

CSS Flexbox es un modelo de diseño que permite una disposición eficiente y dinámica de elementos. Este diseño es unidimensional y permite la colocación de elementos dentro de un contenedor con espacio igualmente distribuido.

Hace que los elementos respondan, lo que significa que los elementos cambian su comportamiento de acuerdo con el tipo de dispositivo que los muestra. Además, hace que los elementos sean flexibles y les proporcione una posición adecuada y simetría.

Un Flexbox tiene dos componentes, que son contenedores flexibles y un elemento flexible. Un contenedor flexible describe las propiedades del elemento del antepasado, mientras que un elemento flexible define las propiedades de los elementos sucesores. Cada uno de estos componentes utiliza varias propiedades para implementar un FlexBox.

Aquí le presentaremos varios diseños receptivos que puede crear para diferentes dispositivos utilizando FlexBox.

Cómo crear una barra de navegación receptiva usando FlexBox?

Aquí vamos a demostrar cómo puede hacer una barra de navegación receptiva utilizando el diseño de una columna para dispositivos como teléfonos móviles, tabletas, etc. que tienen un tamaño de pantalla pequeño y un diseño de dos columnas para dispositivos como computadoras, computadoras portátiles, etc. que tienen tamaños de pantalla más grandes.

Aquí hay una representación visual de un diseño de una columna para tamaños de pantalla pequeños.

El siguiente diagrama muestra el diseño de dos columnas para tamaños de pantalla más grandes.

Ahora pasemos al código.

Html

Hogar
Servicio
Acerca de

En el código anterior, hemos hecho una caja flexible anidando tres recipientes Div dentro de un recipiente Div más grande.

CSS

.contenedor flexible
Pantalla: Flex;
Dirección flexible: columna;
tamaño de fuente: 25px;
Text-Align: Center;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

Usando la clase asignada al DIV más grande, estamos configurando su pantalla en Flex y luego dándole una dirección utilizando el valor de columna de la propiedad de dirección de flujo y luego diseñando nuestro DIV con CSS básico.

CSS

.Nav1
Color de fondo: Darkgray;
relleno: 15px;
Flex: 50px;

.Nav: Hover
Color de fondo: LightGray;

Aquí simplemente estamos diseñando nuestras columnas de Navbar proporcionándoles un color de fondo, relleno y longitud inicial utilizando la propiedad flexible y definiendo algunos estilo en el enlace de la navegación.

CSS

@Media (Min-Width: 768px)
.contenedor flexible
Dirección flexible: fila;

La consulta anterior establece que cuando el ancho de un dispositivo en particular es de 768 px o más amplio, la dirección del diseño cambiará de un diseño de una columna a dos columnas.

Producción

Cuando el ancho es 767px o menos.

Cuando el ancho es 768px o más amplio.

Se generó con éxito una barra de navegación receptiva.

Cómo crear una cuadrícula de imagen receptiva usando FlexBox?

Así es como puede crear una galería receptiva que cambia su comportamiento de acuerdo con la ventana del navegador.

Html

Aquí hemos creado un contenedor Div y anidados dos contenedores Div más dentro de él. Ambos contenedores anidados anidan aún tres imágenes cada una.

CSS

.envase
Pantalla: Flex;
Flex-Wrap: envoltura;
relleno: 5px;

El DIV con la clase de "contenedor" se muestra como una caja flexible, y se le ha dado cierto relleno. Además, la propiedad Flex-Wrap se asigna el valor de envoltura, lo que significa que si es necesario, las imágenes se envolverán dentro del contenedor.

CSS

.columnas img
Ancho: 100%;

.columnas
Flex: 30%;
MAX-ANCHO: 30%;
relleno: 5px;

Las imágenes han recibido un ancho del 100% para que se ajusten adecuadamente en el contenedor, además, utilizando el ancho Flex y el máximo, estamos creando dos columnas que se colocarán una al lado de la otra.

CSS

@Media (max-width: 600px)
.columnas
flexión: 50%;
anchura máxima: 50%;

La consulta de los medios especifica que si el ancho es menor que el número especificado, el dos columnas se convertirá en uno.

Producción

Cuando el ancho es 600px o más ancho.

Cuando el ancho es 600px o menos.

Se creó una galería de imágenes receptiva.

Conclusión

Se puede crear un diseño web receptivo utilizando varias propiedades FlexBox, como Dirección Flex, Flex-Flow, Flex-Wrap, etc., junto con la especificación de ciertas consultas de medios. La consulta de medios debe especificar el tipo y las características de un dispositivo según el cual el diseño web alterará su apariencia en varios dispositivos. En el artículo anterior, hemos demostrado algunos diseños que puede crear utilizando varias propiedades de FlexBox junto con consultas de medios.