Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Cajas Flexibles CSS3 con Flexbox

CSS Flexible Box Layout no es una simple propiedad CSS3, es un modelo de diseño. Flexbox intenta cambiar la forma de diseñar y generar contenidos totalmente adaptables a cualquier dispositivo. Flexbox es probablemente uno de los más completos y eficaces módulos de maquetación. Todo lo que era complicado en versiones anteriores de CSS (como centrar verticalmente o diseñar estructuras que se redimensionen con elegancia) con flexbox ( CSS3 ) es ya una tarea muy fácil (aunque la curva de aprendizaje de todas sus propiedades y comportamientos es algo mayor).

La propiedad flexbox, de CSS3, como he indicado, es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Es, por tanto, muy conveniente conocer el manejo de las media queries y como se implementa en el archivo CSS.

Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos. Además no es necesario utilizar "limpiar-float" (clear: both) para que el comportamiento sea el esperado.

Ejemplo de diseño común HTML5 utilizando Flexbox.

Es conveniente observar su comportamiento para las distintas resoluciones (smartphone, tablet y desktop).

See the Pen HTML5 báscio con Flexbox by Jesús Plaza M. (@3con14) on CodePen.

Etiquetas: Teoría, CSS3

Imprimir

En línea...

Hay 16 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png7.png0.png5.png3.png
Hoy ........13
Ayer .......30
Mes ........295

Jueves, 19 Octubre 2017