¿Qué son los flexboxes en css? Desarrollador de registros, desarrollo de aplicaciones

En CSS3 hay varios modos de diseño .

El diseño del bloque, diseñado para diseñar documentos. El diseño del bloque contiene características centradas en el documento, como la capacidad de elementos flotantes o distribuirlos en varias columnas.
El diseño en línea, diseñado para diseñar texto.
El diseño de la mesa, diseñado para colocar mesas.
El diseño posicionado, diseñado para posicionar elementos sin mucha interacción con otros elementos.
El diseño de caja flexible , diseñado para diseñar páginas complejas que se pueden cambiar de tamaño sin problemas.
El diseño de cuadrícula, diseñado para diseñar elementos relativos a una cuadrícula fija.

¿Por qué se requiere el diseño de caja flexible cuando ya tenemos diseño de bloque y diseño en línea ?

El algoritmo de diseño de Flexbox es independiente de la dirección en comparación con el diseño de bloque, que está sesgado verticalmente, o el diseño en línea, que está sesgado horizontalmente. Si bien el diseño del bloque funciona bien para las páginas, carece de una definición suficiente para admitir los componentes de la aplicación que tienen que cambiar la orientación, cambiar el tamaño, estirar o encoger a medida que cambia el agente de usuario, cambia de vertical a horizontal, y así sucesivamente.

¿Cuándo usar el diseño de caja flexible ?

El diseño de Flexbox es más apropiado para los componentes de una aplicación y diseños de pequeña escala, mientras que el diseño de cuadrícula (emergente) está destinado a diseños de mayor escala.
Flexbox proporciona la capacidad de cambiar dinámicamente el diseño para diferentes resoluciones de pantalla. Entonces, cuando está diseñando una aplicación web receptiva, el diseño de flexbox es su amigo.
Cuando desee columnas de igual altura para un grupo de columnas en una fila. Es muy difícil diseñar columnas de igual altura para todas las pantallas cuando el tamaño de la pantalla no se conoce de antemano simplemente usando el diseño de bloque o en línea o de tabla.
Centrado perfecto de un elemento en pantalla. No podría ser más simple si usa flexbox.
Imaginemos que tenemos una navegación alineada a la derecha en la parte superior de nuestro sitio web, pero queremos que se centre en pantallas de tamaño mediano y de una sola columna en dispositivos pequeños. Suficientemente fácil. Simplemente use el atributo “orden” junto con la consulta de medios para especificar el orden de varios puntos de interrupción en CSS. Nota: Internet Explorer y Safari no admiten la propiedad del pedido.

Soporte de diseño flexible en navegadores:

¿Por qué usar flexboxes cuando tenemos marcos CSS como Bootstrap (CSS Framework) ?

Bootstrap utiliza el diseño de bloques principalmente para su estructura de cuadrícula. El diseño del bloque depende de la propiedad flotante para el posicionamiento de elementos en la ventana gráfica. Bootstrap, debido a que utiliza flotadores, necesita una solución clara después de cada fila, o obtendrá divisiones desalineadas de diferente altura. Flex-box no hace eso y en su lugar comprueba el div más alto en el contenedor y se adhiere a su altura.
No tiene que escribir JavaScript para el diseño y el posicionamiento, que es una gran victoria.

¿Qué es Flexbox y qué no es ?

Flexbox se puede usar para crear un sistema de cuadrícula más potente de una manera más fácil, pero no es un sistema de cuadrícula en sí mismo.
El diseño de Flexbox es más apropiado para los componentes de una aplicación y diseños de pequeña escala, mientras que el diseño de cuadrícula está destinado a diseños de mayor escala.

Lecturas adicionales :