Bootstrap Flexbox

Flexbox trabaja en un sistema de cuadricula sobre los ejes  x e y, estableciendo un contenedor para usar el FlexBox, donde la organización de los elementos se convierten en elementos flexibles, en el interior del espacio proporcionado. Esto funciona muy bien para los sitios responsive.

Flexbox dispone de varias propiedades que lo hacen único donde destacaremos las siguientes:

  • display: Flex convertirá el elemento contenedor en FlexBox y los elementos dentro del contenedor en elementos flexibles. Esto permite establecer cómo desees los elementos para ocupar el espacio.
  • flex-direction: Habilita el espaciado equitativo de elementos flexibles para que sean vertical u horizontal. Esta es una gran mejora ya que antes era bastante difícil alinear verticalmente los elementos, o el espacio por igual, especialmente cuando estamos trabajando en aplicaciones adaptables a todos los dispositivos.
  • justify-content: Permite elegir entre diferentes opciones para cambiar la alineación de los elementos flexibles en el bloque principal.
  • order: Permite cambiar el orden en que se muestran los elementos flexibles.

Ver ejemplos en funcionamiento

Bootstrap 4 está construido con FlexBox, pero no se ha cambiado la visualización de todos los elementos para mostrar ya que esto agregaría muchas anulaciones innecesarias y cambiaría inesperadamente los comportamientos de las classes dentro del navegador. Esto quiere decir que ahora con Bootstrap 4 se puede seguir usando el sistema de bloques como hasta ahora más las ventajas de poder utilizar FlexBox.

A pesar de que su funcionalidad no es compatible con navegadores antiguos y es un poco complejo aprenderlo, Flexbox está cogiendo mucha fuerza en el mercado debido a sus grandes ventajas.

¿Crees que Bootstrap + Flexbox será una fusión bien popular para desarrollar sitios Webs?

Esperamos tus comentarios…

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.