html - bootstrap - flexbox menu responsive

Flexbox vs Twitter Bootstrap(o marco similar) (3)

Me temo que te perdiste otro artículo sobre trucos CSS :

Nota: El diseño de Flexbox es el 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á diseñado para diseños de mayor escala.

No significa que no puedas intentarlo, pero solo piénsalo dos veces. Y todo depende del soporte deseado del navegador al final.

Recientemente descubrí Flexbox cuando estaba buscando una solución para hacer divs la misma altura, dependiendo de la más alta.

Leí la siguiente página en CSS-tricks.com y me convenció de que flexbox es un módulo muy poderoso para aprender y usar. Sin embargo, también me hizo pensar en el hecho de que Twitter Bootstrap (y marcos similares) ofrecen las mismas funciones (+, por supuesto, mucho más) con sus sistemas de cuadrícula.

Ahora, las preguntas son: ¿Cuáles son los pros y los contras de flexbox ? ¿Hay algo que no se puede hacer con Flexbox que se puede hacer con un marco como Bootstrap (por supuesto, simplemente hablando del sistema de cuadrícula)? ¿Cuál es más rápido cuando se implementa en un sitio web?

Supongo que solo para el sistema de cuadrícula es más inteligente usar flexbox , pero ¿qué flexbox si ya está usando un marco, hay algo que flexbox puede agregar?

¿Hay alguna razón para elegir el "sistema de cuadrícula" de flexbox en lugar de un marco?

No he usado Flexbox (lo he leído y parece genial) pero soy un desarrollador frontend de Bootstrap. Le sugiero que pruebe las páginas de impresión de Flexbox antes de tomar una decisión final. Ya sabes ... A veces los estilos de impresión son un dolor de cabeza terrible y Bootstrap me ayuda mucho cuando tengo que diseñar formatos de impresión.

Por un par de razones, flexbox es mucho mejor que bootstrap:

Bootstrap usa flotadores para hacer el sistema de cuadrícula, lo que muchos dirían que no está destinado a la web, donde flex-box hace lo contrario al mantenerse flexible al tamaño y contenido de los elementos; la misma diferencia que usar píxeles vs em / rem, o como controlar sus divs solo usando márgenes y relleno y nunca establecer un tamaño predefinido.
Bootstrap, debido a que usa flotadores, necesita una correcció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.

La única razón por la que elegiría bootstrap sobre flex-box es la falta de compatibilidad con el navegador (principalmente IE) (ya muere). Y a veces obtienes un comportamiento diferente de Chrome y Safari a pesar de que ambos usan el mismo motor de webkit.

Editar:

Por cierto, si el único problema que enfrenta son las columnas de igual altura, hay bastantes soluciones para eso:

Puede usar display: table en el padre, display: table-cell; en el niño Vea Cómo obtener la misma altura en la pantalla: celda de tabla
Puede usar el posicionamiento absoluto en cada div:
position: absolute; top: 0; bottom: 0;
También existe la solución jquery / JS, y otra solución que no puedo recordar en este momento que intentaré agregar más tarde.

Edición 2:

Consulte también http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties sobre cómo funciona flex-box.

Edición 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Edición 4: https://caniuse.com/#feat=flexbox