Guía visual para aprender Flexbox de CSS3

Flex Direction

Esta propiedad especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección en el flex-conteiner. permite manejar el direccionamiento de los flex items, es decir cambiar el flujo normal de los elementos flexibles en el main axis. Esta propiedad tiene múltiples valores que nos van a permitir variar de todas las formas el direccionamiento de los elementos hijos flexibles. Sus valores son:

• row (por defecto)
• row-reverse
• column
• column-reverse

 flex-direction: row;

Con el valor row definimos el eje principal (main axis) del flex container horizontalmente de izquierda a derecha.

.flex-container {
    display: flex;
    flex-direction: row;
}

 flex-direction: row-reverse;

Con el valor row-reverse (fila inversa) los flex items se apilan en el eje principal (main-axis) pero esta vez de derecha a izquierda, esta vez intercambiando el main-start y main-end respectivamente.

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

 flex-direction: column;

Con el valor column los flex items se apilan en una columna de arriba hacia abajo intercambiando los ejes principal y secundario: con column el main-axis vertical y el cross-axis es horizontal.

.flex-container {
    display: flex;
    flex-direction: column;
}

 flex-direction: column-reverse;

Con el valor column-reverse los flex items se apilan en una columna invertida, esta vez de abajo hacia arriba, intercambiando los ejes principales y secundario e intercambiando los puntos inicial y final (main-start y main-end).

.flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
}

Flex Wrap

El comportamiento inicial del contenedor flexible es poder mantener los flex items en su main axis o eje horizontal sin importar que las dimensiones de estos items cambien, pero hay ocasiones donde vamos a querer controlar este alineamiento y hacer que los elementos puedan saltar de línea para poder mantener una apariencia deseada en estos flex items. Con flex-wrap vamos a poder especificar las líneas del contenedor flexible, si queremos un contenedor de una línea o un contenedor multilínea para con sus flex-items. Sus valores son:

• nowrap (por defecto)
• wrap
• wrap-reverse

 flex-wrap: nowrap;

Con este valor Los flex-items son distribuidos en una sola línea sin importar cuántos items sean, el contenedor tratará de de conservar sus ítems en su línea principal lo cual puede llevar a que se desborden del contenedor flexible si la suma de estos es mayor al ancho del contenedor. es decir el contenedor tendrá una sola linea principal (single-line).

.flex-container {
    display: flex;
    flex-wrap: nowrap;
}

 flex-wrap: wrap;

Con este valor en la propiedad flex-wrap los elementos flexibles son colocados en varias líneas si el ancho de estos es superior al ancho del contenedor flexible. Esto es romper la línea del eje horizontal si les es necesario para así conservar las características de dimensiones de los flex items. Esto es de izquierda a derecha y de arriba a abajo. Esto vuelve al contenedor un elemento multi-línea.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

 flex-wrap: wrap-reverse;

Con el valor wrap-reverse en la propiedad flex-wrap los flex items también pueden romper la línea del eje horizontal si les es necesario. Pero esta vez el orden es de izquierda a derecha y de abajo a arriba.

.flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
}

Flex Flow

La propiedad flex-flow es simplemente la forma shorthand o forma rápida para las propiedades flex-direction y flex-wrap vistas anteriormente. Los valores que se aplican por defecto a esta propiedad son las mismas que se aplican a las propiedades que están actuando como valor. Sus valores son:

• valores de la propiedad flex-direction
• valores de la proiedad flex-wrap

.flex-container {
    display: flex;
    flex-flow: row-reverse wrap;
}

Justify Content

Justify-content nos va a permitir alinear los elementos en el eje principal (main axis) del contenedor flexible, esto puede ser de forma vertical o horizontal según lo especifiquemos con flex-direction, también nos va a ayudar a distribuir los flex items en el contenedor flexible cuando los items no utilicen todo el espacio disponible en su eje principal actual. Esto es declarar la forma en que el navegador debe distribuir el espacio disponible entre los items flexibles. Sus valores son:

• flex-start (por defecto)
• flex-end
• center
• space-between
• space-around

 justify-content: flex-start;

El valor flex-start de la propiedad justify-content lo que hace es alinear los flex items en el main start o comienzo del eje principal del contenedor flexible.

.flex-container {
    display: flex;
    justify-content: flex-start;
}

 justify-content: flex-end;

El valor flex-end de la propiedad justify-content lo que hace es alinear los flex items en el main end o final del contenedor flexible.

.flex-container {
    display: flex;
    justify-content: flex-end;
}

 justify-content: center;

El valor flex-center lo que hace es alinear los flex items en el centro del main axis del contenedor flexible.

.flex-container {
    display: flex;
    justify-content: center;
}

 justify-content: space-between;

space-between alinea los flex items a lo largo del main axis y va a hacer que los flex items se tomen la misma distancia o espaciado entre ellos en main axis del contenedor flexible quedando el primer y último elemento alineados con los bordes del contenedor en el eje principal.

.flex-container {
    display: flex;
    justify-content: space-between;
}

 justify-content: space-around;

space-around alinea los flex items a lo largo del main axis y muestra los flex items con el mismo espacio de separación entre si, en diferencia del valor space-between los items primero y ultimo toman también el espaciado entre los bordes del contenedor flexible.

.flex-container {
    display: flex;
    justify-content: space-around;
}

Align Items

Align-items nos permite establecer la alineación que tendrán por defecto los flex item en el Cross axis (Eje secundario), es similar a la propiedad justify-content pero esta vez la dirección es perpendicular al main axis del contenedor flex. Sus valores son:

• stretch (por defecto)
• flex-start
• flex-end
• center
• baseline

 align-items: stretch;

El valor stretch (estirar) para la propiedad align-items lo que va a hacer es tratar de llenar toda la altura (o anchura) desde el cross start hasta el cross end del contenedor flexible, siempre y cuando los items no tengan propiedades de dimensión definidas.

.flex-container {
    display: flex;
    align-items: stretch;
}

 align-items: flex-start;

Con flex-start los flex items se apilan en el cross start del cross axis (eje secundario) del contenedor flexible, es decir en el inicio del eje transversal.

.flex-container {
    display: flex;
    align-items: flex-start;
}

 align-items: flex-end;

Con flex-end los flex items se apilan al final del cross axis, esto es en el cross end del eje secundario del contenedor flexible.

.flex-container {
    display: flex;
    align-items: flex-end;
}

 align-items: center;

Con center los flex items se apilan en el centro del cross axis (eje secundario) del contenedor flexible, ósea en el eje transversal.

.flex-container {
    display: flex;
    align-items: center;
}

 align-items: baseline;

baseline alinea los flex items en el cross axis (eje secundario) del contenedor flexible basandose en las líneas base de cada item, esta se define en base a los texto de los flex ítems.

.flex-container {
    display: flex;
    align-items: baseline;
}

Align Content

Align-content ajusta las líneas dentro del flex container cuando hay espacio extra en el eje secundario. Esta propiedad sólo tiene efecto cuando el contenedor flexible es multi-línea, y esto solo lo hacemos por medio de los valores wrap y wrap-reverse de la propiedad flex-wrap. Sus valores son:

• stretch (por defecto)
• flex-start
• flex-end
• center
• space-between
• space-arount

 align-content: stretch;

Con el valor stretch Las líneas se extienden para ocupar el espacio restante. El espacio libre es dividido equitativamente entre todas las líneas. En pocas palabras estira las líneas para que ocupen el eje transversal completo.

.flex-container {
    display: flex;
    align-content: stretch;
}

 align-content: flex-start;

El valor flex-start lo que hace es ajustar las líneas desde el inicio del eje transversal (cross start) del contenedor flexible.

.flex-container {
    display: flex;
    align-content: flex-start;
}

 align-content: flex-end;

El valor flex-end lo que hace es ajustar las líneas desde el final del eje transversal (cross start) del contenedor flexible.

.flex-container {
    display: flex;
    align-content: flex-end;
}

 align-content: center;

Con el valor center se ajustan las líneas alrededor del centro del eje transversal.

.flex-container {
    display: flex;
    align-content: center;
}

 align-content: space-between;

space-between en la propiedad align-content va a distribuir las líneas a lo largo del eje transversal, de principio a fin (desde el cross start hasta el cross end).

.flex-container {
    display: flex;
    align-content: space-between;
}

 align-content: space-around;

space-around en la propiedad align-content va a distribuir las líneas a lo largo del eje transversal, de principio a fin (desde el cross start hasta el cross end) pero esta vez el primero y último item toman también el espaciado entre los bordes del contenedor flexible.

.flex-container {
    display: flex;
    align-content: space-around;
}

Order

La propiedad order nos ayuda a especificar el orden para disponer los elementos en su contenedor flexible. Los elementos se dispondran en orden ascendente según el valor de la propiedad order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el DOM.

 order: 0;

.flex-item-1 {
    order: 3;
}
.flex-item-2 {
    order: 0;
}
.flex-item-3 {
    order: 1;
}
.flex-item-4 {
    order: 2;
}

Con el valor orden vamos a poder ordenar de forma individual los ítems según el número de orden que le demos.
El valor por defecto e inicial es 0.

Flex Grow

flex-grow especifica el factor de crecimiento del flex items, podemos en su valor determinar hasta que punto el flex item crecerá en relación al resto de ítems que se distribuyen el espacio disponible dentro del contenedor flexible.

El valor por defecto e inicial es 0. (Los números negativos no son válidos)

 flex-grow: 0;

.flex-item-1 {
    flex-grow: 1;
}
.flex-item-2 {
    flex-grow: 1;
}
.flex-item-3 {
    flex-grow: 1;
}
.flex-item-4 {
    flex-grow: 1;
}

Si todos los flex items tienen el mismo valor de flex-grow los ítems tendrán el mismo tamaño y ocuparan todo el espacio disponible brindado por su contenedor flexible. Para saber el valor dado a cada ítem como factor de crecimiento solo debemos de hacer una suma consecutiva con los valores de flex-grow de cada ítem y dividirlo por el valor disponible en el contenedor flexible.

En este caso el primer elemento flex ocupa más espacio en relación con el tamaño de los otros flex ítems debido a que tiene mayor factor de crecimiento, para determinar cuánto crece en relación a los demás ítems debemos de multiplicar el valor asignado a cada flex items por el factor de crecimiento aplicado en la propiedad.

Flex Shrink

flex-shirnk permite especificar el valores de encogimiento o contracción en los elementos flexibles. Es decir, todo lo contrario a flex-grow. Con el valor indicado en números especificaremos cuánto se reducirá el item con respecto al resto de ítems dentro del contenedor flexible cuanto el espacio en este es negativo, osea cuando la suma total de los flex items supera el espacio disponible en el flex container.

El valor por defecto e inicial es 1. (Los números negativos no son válidos)

 flex-shrink: 1;

.flex-item-1 {
    flex-shrink: 1;
}
.flex-item-2 {
    flex-shrink: 2;
}
.flex-item-3 {
    flex-shrink: 1;
}
.flex-item-4 {
    flex-shrink: 1;
}

Por medio de la propiedad flex-shrink todos los elementos flexibles se pueden reducir, pero si lo ponemos a cero (0) los flex items no se reducirán, estos van a mantener su tamaño original.

Flex Basis

flex-basis Permite establecer el tamaño base del main size del flex item que de forma predeterminada actuaria como el width del elemento flexible. Los valores que podemos aplicar son los mismo que usamos para las propiedades tradicionales width y height.

El valor por defecto e inicial es auto.

 flex-basis: auto;

.flex-item-1 {
    flex-basis: auto;
}
.flex-item-2 {
    flex-basis: auto;
}
.flex-item-3 {
    flex-basis: 150px;
}
.flex-item-4 {
    flex-basis: auto;
}

Flex

La propiedad flex es el método shorthand o forma rápida para especificar en una sola propiedades los valores de flex-grow, flex-shrink y flex-basis.

Los valores por defecto son 0 | 1 | auto.

.flex-item {
    flex: flex-grow flex-shrink flex-basis;
}

Esta propiedad especifica 3 valores para controlar la flexibilidad de los elementos flexibles. Estos se pueden especificar de las siguientes forma:

flex: 2 2 10%; /* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 1 30px; /* Especificamos dos valores: flex-grow | flex-basis */
flex: 2 2; /* Dos valores sin unidades: flex-grow | flex-shrink */
flex: auto; /* Especificamos los valores por defecto de cada propiedad */
flex: none; /* Anulamos las características de las propiedades: (0 0 auto)*/

Align Self

La propiedad align-self nos permite especificar la alineación de algún flex item en particular dentro del contenedor flexible en el cross axis o eje secundario.

 align-self: auto;

.flex-item-1 {
    flex-shrink: 1;
}
.flex-item-2 {
    flex-shrink: 2;
}
.flex-item-3 {
    flex-shrink: 1;
}
.flex-item-4 {
    flex-shrink: 1;
}

Sus valores son:

• auto (por defecto)
• flex-start
• flex-end
• center
• baseline
• stretch

Como vemos los valores son los mismo que hemos visto anteriormente aplicados a otras propiedades solo que cuando se aplican a esta propiedad align-self actúan solamente en los flex items seleccionados dentro del contenedor flexible.