Tecnologías de la Información y la Comunicación
Curso 2014-2015

Las cajas fexibles "Flexbox" de CSS3

CSS Flexible Box Layout o "Diseño con cajas Flexibles" como se denomina este modulo que 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.

La propiedad flexbox, de CSS3, 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

Algunos diseñadores piensan que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es, por tanto, más sencillo, y los diseños complicados pueden crearse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Otros piensan que, de momento, se debe utilizar el modelo de "bloques" para diseños complejos y el de "cajas flexibles" para diseños más livianos.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

flex box

 

Flexbox representa un modelo básico de maquetación que supone la existencia de una caja padre llamada contenedor flexible o caja flex. Los elementos hijos situados dentro del contenedor flexible llevan el nombre de elementos o ítems flex.

Los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.

Para transformar una caja cualquiera div en un contenedor flexible basta con utilizar la propiedad display de CSS así:

.contenedor { display: flex; }   /*   o así:  display: flex-inline   */

Propiedades del contenedor flex (contenedor padre)

PropiedadSintaxis y valoresObservaciones
display display: flex |  inline-flex ;
.contenedor {
    display: flex;
}
Si su valor es flex o inline-flex, la propiedad display define un contenedor padre flex (flexbox).
flex-direction flex-direction: row | row-reverse | column | column-reverse;
.contenedor { 
    flex-direction: row; 
}

Establece la dirección del eje principal (main) y por tanto la dirección de los elementos flex.
Valor por defecto:  row (fila)

flex-wrap flex-wrap: nowrap | wrap | wrap-reverse;
.contenedor {
    flex-wrap: wrap;
}
Especifica si puede haber un cambio de línea (wrap) o no (nowrap).
Valor por defecto:  nowrap
flex-flow flex-flow: flex-direction [flex-wrap]
.contenedor { 
    flex-flow: row nowrap; 
}
Es la forma abreviada para las propiedades flex-direction y flex-wrap.
Valor por defecto:  row nowrap
align-items align-items: flex-start | flex-end | center | baseline | stretch;
.contenedor {
    align-items: flex-start;
}
Define como se colocan los elementos dentro de una caja flexible flexbox relativamente al eje transversal (cross).
Valor por defecto:  stretch
justify-content justify-content: flex-start | flex-end | center | space-between | space-around;
.contenedor {
   justify-content:flex-start; 
}
Alinea los elementos del contenedor flex cuando los elementos no utilizan todo el espacio disponible en el eje principal (main).
Valor por defecto:  flex-start
align-content align-content: flex-start | flex-end | center | space-between | space-around | stretch;
.contenedor {
    align-content: flex-start;
}
Alinea los elementos del contenedor flex cuando los elementos no utilizan todo el espacio disponible en el eje transversal (cross).
Valor por defecto:  stretch

 

Propiedades de los elementos ( ítems ) flex

PropiedadSintaxis y valoresObservaciones
align-self align-self: auto | flex-start | flex-end | center | baseline | stretch;
.item {
   align-self: flex-start;
}
Reposiciona elementos individuales relativamente al eje transversal (cross). Normalmente se trata de elementos posicionados con align-items.
flex-grow flex-grow: número | initial | inherit;
.item {
    flex-grow: 2;
}
Define cuánto puede aumentar (crecer) un elemento flex, si fuera necesario.
Valor por defecto:   0
flex-shrink flex-shrink: número | initial | inherit;
.item{
    flex-shrink: 2;
}
Define cuánto puede disminuir (contraerse) un elemento flex, si fuera necesario.
Valor por defecto:   1
flex-basis flex-basis: número | auto | initial | inherit;
.item {
   flex-basis: auto;
}
Especifica el valor inicial del tamaño principal de un elemento flex.
Valor por defecto:   auto
flex flex: none | flex-grow [flex-shrink] [flex-basis];
.item {
   flex: 1;
}
La forma abreviada para flex-growflex-shrink y flex-basis juntos.
Valor por defecto:   0 1 auto
order order: número | initial | inherit;
.item {
   order: 2;
}

Se utiliza para cambiar el orden en el que aparecen los elementos individuales.

 

Demo: http://demo.agektmr.com/flexbox/

(F) MDN

En Línea...

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

Prácticas...

aulav

Visitas...

Hoy10
Ayer48
Mes767
TOTAL45007

Sábado, 19 Agosto 2017