Guía de Flexbox: todo lo que deberías saber sobre esta propiedad

Como todos sabemos, la propiedad de CSS Flexbox nos proporciona una forma eficiente de alinear y distribuir el espacio entre elementos de una página. Por lo tanto, en este artículo vamos a repasar todas sus propiedades, con ejemplos de uso, para tener una guía de Flexbox completa.

Antes de sumergirnos en esta propiedad y su funcionalidad, veamos en qué consiste el modelo Flexbox. Este modelo, como su nombre indica, tiene contenedores flexibles y elementos flexibles:

1. Contenedor padre (Flex Container): Contiene los llamados elementos flexibles.
2. Contenedores hijos (Flex Items): Estos son elementos dentro del contenedor.

Comenzando con FlexBox

Podemos iniciar fácilmente el modelo Flexbox mediante la propiedad display con valor flex (representando como un bloque) o inline-flex (representado como una línea).
A continuación, vamos a mostrar un ejemplo, mediante un div padre cuya clase es flex-container y varios hijos cuyas clases son flex-item:

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

Además, con CSS aplicaremos las siguientes propiedades para iniciar el modelo Flexbox y añadir un estilo básico:

.flex-container {
    display: flex;
    width: 600px;
    background-color: #DDF58C;
}

.flex-item {
    background-color: #67C3E6;
    width: 100px;
    height: 100px;
    margin: 10px;
}

Como resultado, tendremos lo siguiente:

Como podemos ver, los flex-items están alineados por el eje principal, cosa que no es habitual en los elementos div. Div es un elemento de bloque que se alinea verticalmente. Para ver la diferencia, podéis probar a eliminar la propiedad display: flex.

Propiedades de Flex Container (el contenedor padre)

Flex Container tiene las siguientes propiedades: flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content.
Veamos cada uno de ellos.

Flex-direction

Tiene cuatro valores diferentes:

.flex-container {
    flex-direction: row || column || row-reverse || column-reverse;
}

• Row: Valor por defecto. Alinea los elementos en fila a lo largo del eje principal, de izquierda a derecha.

• Column: Alinea a lo largo de una columna, de arriba a abajo.

• Row-reverse: Alinea en fila, al igual que ROW, pero en sentido inverso, de derecha a izquierda.

• Column-reverse: Alinea en columna, pero en orden inverso a column, es decir, de abajo a arriba.

Flex-wrap

.flex-container {
flex-wrap: wrap || nowrap || wrap-reverse;
}

Se usa para indicar cómo se distribuyen los elementos en la fila y cómo afecta esto a su tamaño.
Como ejemplo, vamos a aumentar los elementos dentro del contenedor:

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
</div>

• Nowrap: Valor por defecto. Los elementos siempre se muestran en la misma línea, el eje principal. Por lo tanto, tengamos los elementos que tengamos, el tamaño del contenedor no aumentará e intentará acomodarlos a todo el eje principal.

• Wrap: No ajusta el tamaño del elemento y permite que puedan ocupar varias líneas. Si tenemos muchos elementos, se colocarán a lo largo del eje y, cuando no quede más espacio, pasarán a la siguiente fila.

• Wrap-reverse: Similar a wrap pero, como su nombre indica, en orden inverso. Se colocan todos los elementos en fila, de forma inversa, y cuando no queda espacio, pasan a la siguiente línea, sin alterar su tamaño.

Flex-flow

Es la propiedad abreviada para flex-direction y flex-wrap.

.flex-container {
    /* Esto: */
    flex-flow: row wrap-reverse;
    /* Es lo mismo que:
    flex-direction: row;
    flex-wrap: wrap-reverse;
    */
}

Justify-content

Posiciona los elementos, y los valores que puede tener son:

.flex-container {
    justify-content: flex-start || flex-end || center || space-between || space-around
}

• Flex-start: Valor por defecto. Todos los elementos comienzan en el main-start (inicio principal).

• Flex-end: Posicionan los elementos desde el main-end (el otro extremo, el final).

• Center: Los posiciona en el centro.

• Space-around: Posiciona los elementos con un espacio alrededor del mismo tamaño.

• Space-between: Los posiciona con el mismo tamaño entre cada elemento.

Align-items

Esta propiedad es similar a justify-content, pero la diferencia es el eje a lo largo del cual funciona. Para explicar esto, deberemos quitar la propiedad que define la altura de los elementos hijos, y aumentar la del elemento padre:

.flex-container {
    align-items: flex-start || flex-end || center || stretch || baseline;
}

• Flex-start: Posiciona los elementos desde el inicio del contenedor, es decir, a lo largo del eje transversal.

• Flex-end: Los posiciona al final del contenedor, a lo largo del eje transversal.

• Stretch: Valor por defecto. Extiende los elementos desde el principio hasta el final a lo largo del eje transversal.

• Center: Centra los elementos a lo largo del eje.

• Baseline: Aparentemente, la baseline se parece a flex-start, pero con la diferencia de que la línea que posiciona los elementos es la primera línea de texto del primer elemento. Para que se note la diferencia, hemos aumentado el tamaño de la fuente del primer elemento.

Align-content

Gestiona cómo se alinean los elementos dentro del contenedor, con múltiples líneas. La diferencia con align-items es que el primero alinea elementos, y align-content las filas. Además, align-self, alinea los elementos de forma independiente.

.flex-container {
    align-content : flex-start || flex-end || center || stretch;
}

• Flex-start: Aliena los elementos a lo largo del inicio del eje transversal.

• Flex-end: Alinea los elementos a lo largo del extremo del eje transversal.

• Center: Los alinea en el centro del eje.

• Stretch: Valor por defecto. Estira los elementos a lo largo del eje transversal de principio a fin.

Propiedades de los flex-items (elementos flexibles)

Ahora nos referimos a los Flex-items, que son los que se encuentran dentro del contenedor. En primer lugar, las propiedades de estos elementos son: Order || Flex-grow || Flex-shrink || Flex-basis.

Order

Como su nombre indica, esta propiedad se utiliza para ordenar los elementos dentro del contenedor.
Cuando queremos cambiar el orden sin cambiar el código HTML, podemos utilizar esta propiedad para hacerlo.
Por defecto, todos los elementos tienen el orden 0, lo que los muestra en el mismo orden que salen en el código HTML.
Si el orden de un elemento en concreto se cambia a 1, ese elemento será colocado al final. Cuando a otro elemento se le asigne el valor 2, será colocado a continuación del elemento con orden 1.

.flex-item:nth-child(1){
    order:1;
   }
.flex-item:nth-child(2){
    order:2;
   }

Flex-grow

Por defecto tendrá el valor 0, que indica que el elemento no crecerá dentro del contenedor.

.flex-item {
    flex-grow: 0;
 }

Además, cuando el valor se establezca a 1, podremos ver cómo ha crecido este elemento dentro del contenedor, incluso cuando tengamos la propiedad width establecida, también crecerá.

.flex-item {
    flex-grow: 1;
}

Flex-shrink

Por defecto, tendrá el valor 1. Lo que significa que el elemento se reducirá cuando cambie el tamaño de la ventana del navegador.

.flex-item {
    flex-shrink: 1;
}

Cuando el valor se establezca a 0, este elemento no reducirá su tamaño aunque el navegador cambie de tamaño.

.flex-item {
    flex-shrink:0;
}

Flex-basis

Define el tamaño predeterminado de un elemento antes de que se distribuya el espacio restante.
Si indicamos como valor auto, el tamaño del elemento será igual al contenido.

.flex-item {
    flex-basis : auto;
}

También, si se indica un valor, se ajustará el tamaño del elemento al valor indicado.

.flex-item {
    flex-basis : 200px;
}

Flex

Es la abreviatura de flex-grow, flex-shrink y flex-base. Es por ello que resulta de gran utilidad en diversas ocasiones, por el ahorro de escribir propiedades.

.flex-item {
    /* Esto: */
    flex : 0 1 auto;
    /* Es lo mismo que esto:
    flex-grow : 0;
    flex-shrink : 1;
   flex-basis : auto;
    */
}

Align-self

Se utiliza para posicionar un elemento en particular, cambiando su posición a lo largo del eje transversal, sin afectar al resto de elementos.
Align-self funciona igual que align-item, salvo que el primero alinea un objeto en particular.
Por lo tanto, los valores que podemos utilizar son auto || flex-start || flex-end || center || baseline || stretch. No vamos a explicar cómo funciona cada uno de ellos, ya que son iguales que align-items, pero vamos a poner un ejemplo para alinear un elemento al final:

.flex-item:nth-child(2) {
    align-self : flex-end;
}

Como vemos, el elemento indicado se ha posicionado en la parte inferior del contenedor.

Más información

En conclusión, el uso de Flexbox para creación de layouts es una técnica muy flexible y eficaz. Sin embargo, es más aconsejable para diseños a pequeña escala, mientras que el uso de Grid, está más enfocado a diseños a mayor escala.
No obstante, si deseáis ampliar más información y practicar el funcionamiento de Flexbox y sus propiedades, os recomendamos los siguientes sitios web:
Flexboxfroggy: Juego para aprender sobre Flexbox practicando
Flexbox.io: Curso gratuito con clases de vídeo y ejercicios
A guide to Frexbox: Guía completa de CSS-Tricks, en inglés
Además, si estáis interesados en conocer más propiedades de CSS, os invitamos a que leáis nuestro artículo 6 propiedades de CSS3 que deberías conocer.