Flexbox vs Twitter Bootstrap (o marco similar) [cerrado]

161

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?

— Rvervuurt
fuente

Yo uso Flexbox con Bootstrap.

— Aibrean

Echa un vistazo a la Fundación Zurb para aplicaciones . está completamente construido sobre el sistema de cuadrícula Flexbox

— Salem Ouerdani

Esto puede ser útil. Bootstrap ahora cambia de flotadores a flex

— Faizan Akram Dar

¡Bootstrap 4 ahora es flexbox por defecto! Flexbox es una herramienta de diseño inmensamente poderosa, que proporciona flexibilidad y control incomparables para el sistema de red y los componentes principales. Viene a costa de abandonar el soporte de IE9, pero trae mejoras significativas en el diseño, la alineación y el tamaño de los componentes.

— Nermien Barakat

No estoy de acuerdo con que esto deba cerrarse según la opinión. El autor de la pregunta busca hechos, no opiniones. "¿Cuáles son los pros y los contras de flexbox?" El autor de la pregunta (como yo) está tratando de determinar el punto fuerte y los inconvenientes de cada sistema.

— Darin Cardin

Respuestas:

107

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, y 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

— ctf0
fuente

Gracias por tu comentario. No pude encontrar ninguna explicación sobre cuál fue el "mejor" de los dos, así que espero que mi pregunta (y sus respuestas y las futuras) ayude a las personas a decidir. Afortunadamente, IE 11 está obteniendo una mayor cuota de mercado en este momento que las tres versiones anteriores combinadas (de las cuales IE10 es compatible 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 y flexbox? Ignorando el sistema de cuadrícula del marco mientras lo usa, por supuesto.

— Rvervuurt

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. Mejor, Simpler Grid Systems muestra algunas ideas y ZURB Foundation for Apps usa flexbox para propósitos de diseño

— ckuijjer

en realidad, puedes usar ambos si lo deseas, lo cual creo que es la mejor opción porque no necesitas envolver tu mente en algo a lo que ya estás acostumbrado durante bastante tiempo (como para aquellos que no saben nada más allá BS), pero para mí el punto de venta de flex-box es que tiene la misma flexibilidad que solo puede obtener usando JS pero sin escribir una sola línea de código.

— ctf0

Datos de compatibilidad completos: caniuse.com/#feat=flexbox Tenga en cuenta que Android anterior también tiene problemas.

— cvrebert

Dam, y pensé que ya casi estamos a punto de usarlo, parece que tomará otro año o algo más b4 lo vemos en la naturaleza, gracias por el aviso.

— ctf0

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.

— kurroman
fuente

eso es exactamente por qué usaría la cuadrícula flotante solo para los divs imprimibles junto con las clases de impresión bootstrap

— ctf0

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.

— Kout
fuente

Asegúrese de comprender que el artículo habla de un nuevo diseño de cuadrícula emergente, no de la cuadrícula de arranque.

— getsetbro

Debo decir que me perdí eso! :) Gracias por la corrección.

— Kout

Votado, usted ha señalado una distinción muy clara sobre cómo usar la caja flexible y la cuadrícula sin conflicto de intenciones y propósitos, y para mí, no importa si se refiere a una cuadrícula de arranque o una cuadrícula

— Ahmad Farouk,