Recientemente he descubierto Flexbox cuando yo estaba buscando una solución para hacer que los divs la misma altura, dependiendo de la más alta.

He leído el página siguiente en CSS-tricks.com y me convenció de que flexbox es un muy potente módulo de aprender y de usar. Sin embargo, también me hizo pensar en el hecho de que Twitter Bootstrap (y similares marcos) ofrecen el tipo de la misma funciones (+ supuesto, un montón extra) con sus sistemas de red.

Ahora, las preguntas son: ¿cuáles son los pros y los contras de flexbox? Hay algo que no se puede hacer con Flexbox que uno puede hacer con un framework como Bootstrap (por supuesto puramente hablando sobre el sistema de la red)? Que es más rápido cuando se implementa en un sitio web?

Supongo que cuando sólo para el sistema de la red, es más inteligente puramente uso flexbox, pero lo que si usted ya está usando un marco, hay algo flexbox puede agregar?

Existen razones para elegir flexbox‘s «el sistema de la red», en un marco?

  • Yo uso Flexbox con Bootstrap.
  • Echa un vistazo a Zurb Foundation Para Aplicaciones. está totalmente integrado en la parte superior de la caja flexible Sistema de la red de
  • Este podría ser útil. Bootstrap ahora la conmutación de la flota a la flexión
  • Bootstrap 4 es ahora flexbox por defecto! Flexbox es enormemente potente herramienta de diseño, proporcionando una flexibilidad inigualable y de control para el sistema de la red y los componentes principales. Se trata en el costo de eliminar IE9 apoyo, pero trae mejoras significativas a la disposición de los componentes, alineación y tamaño.
  • No estoy de acuerdo que este debe ser cerrado como una opinión. El autor de la pregunta está en busca de un hecho, no una opinión. «¿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.
InformationsquelleAutor Rvervuurt | 2014-12-22

3 Comentarios

  1. 105

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

    • Bootstrap utiliza flotadores para hacer que el sistema de la red, que muchos dirían que no está hecho para la web, donde flex-box hace lo contrario por mantenerse flexible a los elementos el tamaño y el contenido; la misma diferencia como el uso de píxeles vs em/rem, o como el control de su divs sólo el uso de los márgenes y el relleno, y nunca configuración de un pre-tamaño definido.

    • Bootstrap, porque utiliza flotadores, necesidades clearfix después de cada fila, o se obtendrá desalineados divs de diferente altura. Flex-cuadro no hacerlo y en su lugar se comprueba el más alto de la div en el contenedor y se pega a su altura.

    La única razón por la que me gustaría ir con bootstrap sobre flex-box es la falta de soporte de los navegadores (IE, principalmente) (mueren ya). Y a veces se obtiene un comportamiento diferente del Chrome y Safari aunque ambos usan el mismo motor webkit.

    Edición:

    Por CIERTO, si el único problema que se enfrenta es el ser igual a la altura de las columnas, hay muy pocas soluciones para que:

    • Puede utilizar display: table en el padre, un display: table-cell; en el niño. Ver Cómo llegar a la misma altura en el display:table-cell

    • Puede utilizar el posicionamiento absoluto en cada div:

      position: absolute;
      top: 0;
      bottom: 0;

    • También hay jquery/JS solución, y la otra solución que no puedo recordar en este momento que voy a tratar de añadir más tarde.

    Edit 2:

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

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

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

    • Gracias por tu comentario. No podía encontrar ninguna explicación sobre lo que era la «mejor» de los dos, así que espero que mi pregunta (y tu y futuras respuestas) ayudará a las personas a decidir. Por suerte, es decir, 11 es conseguir una mayor cuota del mercado ahora mismo que el anterior tres versiones combinadas (de la que IE10 apoya flexbox), por lo que en mis ojos es seguro de usar. ¿Cuál es su opinión sobre el uso de una combinación de un marco y flexbox? Ignorando el marco del sistema de la red mientras que la usa, por supuesto.
    • Flexbox puede ser utilizado para crear un potente sistema de la red de una manera más fácil, pero no es un sistema de la red por sí misma. Mejores, más Sencillos de Sistemas de red muestra algunas ideas y ZURB Foundation for Apps utiliza flexbox para propósitos de diseño
    • en realidad u puede utilizar tanto si u quiere, que creo que es la mejor opción porque la u no necesita para envolver ur mente alrededor de algo que ya estás acostumbrado durante bastante tiempo (para los que no sabemos nada más allá de BS), pero para mí el punto de venta de flex-box es que tienen la misma flexibilidad u sólo se puede conseguir mediante el uso de JS pero sin escribir una sola línea de código.
    • La plena compatibilidad de datos: caniuse.com/#feat=flexbox tenga en cuenta que Android más antiguos también tiene problemas.
    • la presa ,así que he pensado que son casi de uso ,parece que nos va a tomar un año o algo b4 vemos en la naturaleza ,gracias por el heads-up.
    • sí, mayores de Android no es compatible, pero tampoco es compatible con bootstrap, y la mayoría de los usuarios de la antigua usar un navegador como chrome, en lugar de navegador de Android de todos modos.
    • El nuevo bootstrap ha cambiado de carrozas a la flexión , consulte este
    • Es flexbox una alternativa para arrancar el sistema de la red, o es complementaria. Lo pregunto porque bootstrap v4 cambia su sistema de rejilla para uso flexbox, ¿qué significa eso realmente?
    • no es una alternativa , en la última versión de BS usted puede utilizar el flexbox basado en cuadrícula o el flotador basado en cuadrícula, o de ambos si u quiere, pero tendrá algunos ajustes.
    • Bootstrap es probable que sea un marco de trabajo que usted está utilizando para todo el sitio, incluyendo su sistema de la red. Flexbox no es un completo framework CSS & creo que no es correcto sugerir que los usuarios pueden reemplazar Bootstrap con Flexbox es?! También, Bootstrap 4 uso Flexbox.

  2. 6

    Yo no uso Flexbox (he leído al respecto y parece ser grande) pero estoy un Bootstrap frontend dev. Sugiero probar Flexbox impresión de las páginas antes de tomar una decisión final. Sabes… a Veces la impresión de que los estilos son un dolor de cabeza terrible y Bootstrap me ayuda mucho cuando tengo que diseñar formatos de impresión.

    • eso es exactamente por qué debería utilizar el flotador de la cuadrícula sólo para el imprimible de divs en conjunción con el bootstrap de impresión clases
  3. 1

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

    Nota: el diseño Flexbox es el más adecuado para los componentes de una aplicación, y a pequeña escala, diseños, mientras que la Cuadrícula de diseño está pensado para grandes diseños.

    No significa que usted no puede probar, pero piensen dos veces. Y todo depende deseada compatibilidad del navegador en la final.

    • Asegúrese de que usted entiende que el artículo está hablando acerca de una nueva y emergente diseño de Cuadrícula – no el grid de bootstrap.
    • Que decir que no me hizo perderte! 🙂 Gracias por la corrección.
    • Upvoted, se han señalado una distinción muy clara como el uso de flex cuadro de la cuadrícula y sin conflicto de la intención y el propósito, y para mí, no importa si te refieres a bootstrap rejilla o cuadrícula ayout

Dejar respuesta

Please enter your comment!
Please enter your name here