Recientemente descubrí Flexboxcuando estaba buscando una solución para hacer que los divs tengan 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 flexboxes 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 de usar flexbox, pero ¿qué pasa si ya está usando un marco, hay algo que flexboxpueda agregar?
¿Hay alguna razón para elegir flexboxel "sistema de cuadrícula" en lugar del marco?
fuente
Respuestas:
Por un par de razones, flexbox es mucho mejor que bootstrap:
Bootstrap usa flotadores para crear el sistema de cuadrícula, 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 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.
La única razón por la que usarí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: tableen el padre, ydisplay: table-cell;en el niño. Vea Cómo obtener la misma altura en la pantalla: celda de tablaPuede usar el posicionamiento absoluto en cada div:
position: absolute; top: 0; bottom: 0;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
fuente
flexbox), por lo que, en mi opinión, es seguro de usar. ¿Cuál es su opinión sobre el uso de una combinación de un marco yflexbox? Ignorando el sistema de cuadrícula del marco mientras lo usa, por supuesto.No he usado Flexbox (lo he leído y parece ser 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.
fuente
Me temo que te perdiste otro artículo sobre trucos CSS :
No significa que no puedas intentarlo, pero solo piénsalo dos veces. Y todo depende del soporte deseado del navegador al final.
fuente