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

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.

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

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:

Propiedad de CSS Flexbox flex-direction con valor row
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.

Propiedad de CSS Flexbox flex-direction con valor row

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

Propiedad de CSS Flexbox flex-direction con valor column

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

Propiedad de CSS Flexbox flex-direction con valor row-reverse

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

Propiedad de CSS Flexbox flex-direction con valor column-reverse

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.

Propiedad de CSS Flexbox flex-wrap con valor nowrap

  • 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.

Propiedad de CSS Flexbox flex-wrap con valor wrap

  • 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.

Propiedad de CSS Flexbox flex-wrap con valor wrap-reverse

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).

Propiedad de CSS Flexbox justify-content con valor flex-start

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

Propiedad de CSS Flexbox justify-content con valor flex-end

  • Center: Los posiciona en el centro.

Propiedad de CSS Flexbox justify-content con valor center

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

Propiedad de CSS Flexbox justify-content con valor space-around

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

Propiedad de CSS Flexbox justify-content con valor space-between

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.

Propiedad de CSS Flexbox align-items con valor baseline

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

Propiedad de CSS Flexbox align-items con valor baseline

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

Propiedad de CSS Flexbox align-items con valor baseline

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

Propiedad de CSS Flexbox align-items con valor baseline

  • 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.

Propiedad de CSS Flexbox align-items con valor baseline

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.

Propiedad de CSS Flexbox align-content con valor flex-start

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

Propiedad de CSS Flexbox align-content con valor flex-end

  • Center: Los alinea en el centro del eje.

Propiedad de CSS Flexbox align-content con valor center

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

Propiedad de CSS Flexbox align-content con valor stretch

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;
   }

Propiedad de CSS Flexbox order

Flex-grow

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

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

Propiedad de CSS Flexbox flex-row con valor 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;
}

Propiedad de CSS Flexbox flex-row con valor 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;
}

Propiedad de CSS Flexbox flex-basis con valor auto

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

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

Propiedad de CSS Flexbox flex-basis con valor en píxeles

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;
}

Propiedad de CSS Flexbox align-self

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 recomiendo 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 invito a que leáis el artículo 6 propiedades de CSS3 que deberías conocer.