Flexbox vs Twitter Bootstrap (o un marco similar)

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

He leído 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 el mismo tipo de funciones (+ por supuesto, mucho más) con sus sistemas de grillas.

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 pueda hacer con un framework como Bootstrap (por supuesto hablando del sistema de grid)? ¿Cuál es más rápido cuando se implementa en un sitio web?

Supongo que solo cuando se trata del sistema de grillas, es más inteligente usar flexbox , pero ¿y si ya estás usando un framework, hay algo que flexbox pueda agregar?

¿Hay alguna razón para elegir el “sistema de grillas” de flexbox sobre un marco?

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

  • Bootstrap usa flotadores para hacer el sistema de grillas, que muchos dirían que no es para la web, donde flex-box hace lo contrario al mantenerse flexible al tamaño y contenido de los ítems; La misma diferencia que usar píxeles frente a em / rem, o como controlar tus divs solo usando márgenes y relleno y nunca establecer un tamaño predefinido.

  • Bootstrap, debido a que usa flotadores, necesita clearfix después de cada fila, o obtendrá divisiones desalineadas de diferentes alturas. Flex-box no hace eso y en su lugar busca el div más alto en el contenedor y se adhiere a su altura.

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

Editar:

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

  • Puede usar display: table en el elemento principal, una display: table-cell; en el niño Consulte Cómo obtener la misma altura en la pantalla: tabla-celda

  • Puedes usar posicionamiento absoluto en cada div:
    position: absolute; top: 0; bottom: 0;

  • También está la solución jquery / JS, y otra solución que no puedo recordar en el momento en que intentaré agregar más tarde.

Editar 2:

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

Editar 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Editar 4: https://caniuse.com/#feat=flexbox

No he usado Flexbox (lo he leído y parece ser excelente) pero soy un desarrollador de 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 terrible dolor de cabeza y Bootstrap me ayuda mucho cuando tengo que diseñar formatos de impresión.

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

Nota: 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 Grid está destinado a diseños de mayor escala.

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