FLEXBOX CSS3

Flexbox o caja flexible, es un nuevo módulo para el CSS3, el cual permite mejorar el diseño de los contenedores de manera fácil e intuitiva. Unas de las principales características que tiene, es la capacidad de modificar el ancho o alto de sus hijos y así poder llenar los espacios libres de cada contenedor, haciéndolo más flexible al acomodarse en los diferentes tamaños de pantalla y dispositivos.

Si ya tienes algún conocimiento de HTML y CSS, posiblemente has visto o trabajado en algún sitio web con la propiedad float, que es para desplazar los contenedores. Pero Flexbox no realiza lo mismo que la propiedad float, sino que mejora el diseño de cada contenedor para no interferir en los márgenes de sus contenidos.

Otras de las ventajas que tiene flexbox, es que pueden posicionar los elementos donde desees horizontalmente y/o verticalmente. Incluso puedes establecer cómo se ordenarán los contenedores y el tamaño que tendrá cada uno. Esto es perfecto para crear aplicaciones web que puedan ser adaptables a los dispositivos móviles (Responsive Design).

Ejemplo básico “flex”

Este ejemplo básico muestra como aplicar “flexibilidad” a un elemento y como sus “hijos” se comportan flexiblemente.

Ver demo.

Este ejemplo muestra como “Flexbox” proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s