FLEX

La propiedad de display flex, ayuda a colocar las cajas como si fueran celdas de tablas, con un comportamiento predecible y adaptable. Mozilla a estas cajas flexibles las llama el Diseño del Santo Grial, flex soluciona problemas de control del diseño y se adpata facilmente a los diferentes dispositivos.

Para los diseñadores es la mejor solución, la caja padre contiene cajas que se pueden colocar en cualquier direccción y tienen dimensiones flexibles, se adpatan al espacio visible, con flex nos olvidamos de float y clear.

El orden de los elementos puede alterarse y ser diferente en el código HTML que en su representación visual.

La propiedad fles es aceptada por los navegadores:

Crome versión 29.0 y 21.0 con el prefijo -webkit-
Explorer desde la versión 11.0 y 10.0 con el prefijo -ms-
Firefox desde la versión 28.0 y 18.0 con el prefijo -mox-
Safari desde la 6.1 con el prefijo -webkit-
Opera desde la versión 12.0

Vocabulario

En flex hay un contenedor flexible que tiene una dirección enj el eje horizontal y vertical, llamadas tipo fila row que se muestran los elementos hijos (item flexibles) horizontalmente en el eje principal de izquierda a derecha y columna column los hijos se colocan en el eje vertical de arriba a abjo. Dentro están los item flexibles,

Ejemplo de organización horizontal: (ver ejemplo)

CSS del Contenedor:

display: flex;
flex-direction: row;

CSS del item:

flex: 1 1 auto;

CONTENEDOR

Las etiquetas del contenedor, son:

display: flex; /* or inline-flex */

La propiedad flex en el contenedor afecta a los hijos.

FLEX direction

La dirección establece el eje derecha izquierda o arriba a abajo. Hay cuatro valores de dirección posibles para el elemento contenedor:

flex-direction: row // los item se ordenan en horizontal
flex-direction: row-reverse // los item se ordenan en horizontal pero los se invierte el punto de inicio y final y el orden de los item
flex-direction: column // los elementos se ordenan en el eje vertical
flex-direction: column-reverse // se ordenan en el eje vertical pero invertidos

Tiene 4 posibles valores, fila y columna y el orden establecido en el HTML, en la propiedad CSS order o al revés.

Wrap

La etiqueta Wrap, se emplea para que puedan dividirse si no caben o forzar que no se dividan.

flex-wrap: nowrap | wrap | wrap-reverse;

Align-content

Modos de alinear las cajas de los item cuando sobra espacio, no tienen efecto cuando ocupan sólo una línea. (ver ejemplo)

align-content: flex-start // alinean en el cross-start
align-content: flex-end // alínean en el cross-end
align-content: center // Alinean en el centro
align-content: space-between // se distribuyen en el contenedor
align-content: space-around // se distribuyen uniformemente, el espacio entre ellas es el mismo
align-content: stretch // los objetos ocupan todo el espacio

Align-items

Para justificar el contenido, según su contenido dentro del contenedor, no todas ocuparan lo mismo. (ver ejemplo row) (ver ejemplo column)

align-items: flex-start // en la parte superior
align-items: flex-end // en la parte inferior
align-items: center // centrado
align-items: baseline // alineados a la línea base
align-items: stretch // los item se igualan al tamaño del contenedor

Justify

Para justificar las cajas (ver ejemplo)

justify-content: flex-start // justifica en el inicio
justify-content: flex-end // justifica al final
justify-content: center // justifica al centro
justify-content: space-between // distribuye el espacio entre cajas
justify-content: space-around // distribuye sobre el padre

Ver propiedad

Justificar

LOS ITEM

Las propiedades de los contenedores hijos son:

ORDEN

Para modificar el orden natural de las cajas HTML.

order: <valor >;

GROW

Permite definir el crecimiento de las cajas si es necesario.

flex-grow: <number>; /* default 0 */

SHRINK

Define la posibilidad de encoger de una caja si es necesario

flex-shrink: <number>; /* default 1 */

BASIS

Distribución del espacio sobrante

flex-basis: <length> | auto; /* default auto */

Space

FLEX

Para escribir todos los valores anteriores en una sola propiedad:

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

ALIGN-SELF

Alineación independiente de cada ítem.