La guía definitiva de Flexbox

Resumen ¶

El diseño Flexbox, oficialmente reconocido como CSS Flexible Box Layout Module, es un modelo de diseño en CSS.

Flexbox es un diseño unidimensional, lo que significa que coloca los elementos en una dimensión a la vez, ya sea como fila o como columna, pero no ambas a la vez. Esto puede contrastarse con el modelo bidimensional: CSS Grid Layout, que coloca los elementos en dos dimensiones simultáneamente (filas y columnas a la vez).

Flexbox se introdujo como una alternativa a CSS Floats para definir el aspecto general de una página web. Flexbox ofrece muchas ventajas; en particular, con él puedes controlar la alineación, la dirección, el orden y el tamaño de los elementos.

Los elementos dentro de un contenedor flex:

• pueden organizarse en cualquier dirección (hacia la izquierda, hacia la derecha, hacia abajo o incluso hacia arriba) (flex-direction).
• pueden tener un orden directo (de izquierda a derecha) o invertido (de derecha a izquierda).
• pueden tener ancho y alto “flex” para llenar el espacio disponible (flex-item).
• pueden configurarse para contraerse o expandirse dinámicamente a lo largo del eje principal y, al mismo tiempo, conservar el tamaño del eje cruzado secundario.
• pueden organizarse linealmente a lo largo del eje principal o envolverse en varias líneas a lo largo o a través del eje cruzado.

Flexbox es relativamente nuevo, pero hoy en día cuenta con un excelente soporte en los navegadores.

(Más información sobre compatibilidad y soporte de navegadores).

Conceptos básicos de Flexbox ¶

Al trabajar con Flexbox, debes pensar en términos de dos ejes: el eje principal y el eje cruzado, y debes diferenciar entre contenedores flex y elementos flex.

Eje principal y eje cruzado

Flexbox es un diseño orientado a un solo eje; tiene un eje principal y un eje cruzado. Esto significa que los elementos se colocan a lo largo del eje principal o del eje cruzado. El eje cruzado siempre es perpendicular al principal.

El eje principal está definido por la propiedad flex-direction, que tiene los siguientes valores:

• row
• row-reverse
• column
• column-reverse

Si la propiedad flex-direction se especifica con los valores row o row-reverse, entonces tu eje principal será horizontal, es decir, se extenderá a lo largo de la fila en la dirección inline. Y el eje cruzado se extenderá a lo largo de las columnas.

Si la propiedad flex-direction se especifica con los valores column o column-reverse, entonces el eje principal será vertical, es decir, se extenderá desde la parte superior de la página hasta la inferior en la dirección block. En cuanto al eje cruzado, se extenderá a lo largo de las filas.

Echa un vistazo a esta figura para comprender mejor el concepto detrás de los ejes de Flexbox.

• eje principal - El eje principal de un contenedor flex es el eje a lo largo del cual se colocan los elementos flex.
• main-start | main-end - Los elementos flex se distribuyen dentro del contenedor comenzando en main-start y avanzando hacia main-end.
• tamaño principal - El ancho o alto de un elemento flex en la dimensión principal es el tamaño principal del elemento.
• eje cruzado - El eje perpendicular al eje principal, cuya dirección depende de la dirección del eje principal (horizontal o vertical).
• cross-start | cross-end - Las líneas flex se llenan con elementos y se colocan dentro del contenedor comenzando en el lado cross-start del contenedor flex y avanzando hacia el lado cross-end.
• tamaño cruzado - El ancho o alto de un elemento flex en la dimensión cruzada es el tamaño cruzado del elemento.

Fuente: W3.org

Contenedores flex y elementos ¶

Un contenedor flex es un elemento padre que agrupa un conjunto de elementos hijos, elementos flex. En la mayoría de los casos, el contenedor define el diseño y la posición de sus elementos flex; sin embargo, los elementos flex pueden manipularse individualmente.

Para convertir un elemento HTML en un contenedor flex debes usar la propiedad display con los valores flex (contenedor flex de nivel de bloque) o inline-flex (define un contenedor flex de nivel en línea). De lo contrario, el navegador ignorará todas las propiedades de flexbox que hayas usado.

Contenedor Flexbox

.container {
  display: flex; /* or inline-flex*/
}

Propiedades del contenedor flex ¶

La propiedad flex-direction

La propiedad flex-direction se usa para crear diseños en fila y en columna. Especifica las direcciones del eje principal del contenedor flex y establece el orden en que aparecen los elementos.

La propiedad flex-direction tiene los siguientes valores:

• row - los elementos se muestran a lo largo de la fila de izquierda a derecha.
• row-reverse - los elementos se muestran de derecha a izquierda.
• column - los elementos se muestran verticalmente de arriba hacia abajo.
• column-reverse - los elementos se muestran verticalmente de abajo hacia arriba.

Ejemplo de la propiedad flex-direction:

ejemplo de la propiedad flex-direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        color: #8ebf42;
      }
      .flex-container {
        display: flex;
        flex-direction: row-reverse;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 80px;
        height: 70px;
        margin: 5px;     
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <h3>row-reverse</h3>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Try it Yourself »

En nuestro ejemplo, los elementos están organizados en orden inverso. Cambia los valores de la propiedad flex-direction (row, column, column-reverse) para ver cómo cambia la apariencia de los elementos.

INFO

Nota: row y row-reverse dependen del modo de escritura, por lo que en un contexto rtl (de derecha a izquierda) se invertirán respectivamente.

La propiedad flex-wrap ¶

Por defecto, todos los elementos flex caben en una sola línea y, si son demasiado anchos para el contenedor, lo desbordarán. Para evitar esto, debes usar la propiedad flex-wrap para envolver los elementos.

La propiedad puede aceptar los siguientes valores:

• nowrap (predeterminado) - los elementos flex se muestran en una sola línea; por defecto, se ajustan al ancho del contenedor flex.
• wrap - los elementos flex se muestran en varias filas si es necesario, de izquierda a derecha y de arriba hacia abajo.
• wrap-reverse - los elementos flex se muestran en varias filas si es necesario, de izquierda a derecha y de abajo hacia arriba.

INFO

Nota: La propiedad depende del modo de escritura, por lo que en un contexto rtl (de derecha a izquierda) se invertirán respectivamente.

La propiedad justify-content ¶

La propiedad justify-content se usa para definir la alineación horizontal de los elementos a lo largo del eje principal. Ayuda a distribuir el espacio libre que queda entre los elementos flex en el eje principal.

Los valores de justify-content son los siguientes:

• flex-start (valor predeterminado) - los elementos se colocan al inicio del contenedor.
• flex-end - los elementos se colocan al final del contenedor.
• center - los elementos se colocan en el centro del contenedor.
• space-between - los elementos se distribuyen uniformemente (con espacio entre ellos) en la línea; el primer elemento está en la línea de inicio y el último en la línea de final.
• space-around - los elementos se muestran con espacio antes, entre y después.
• space-evenly - los elementos se distribuyen de modo que el espacio entre cualesquiera dos elementos (y el espacio hasta los bordes) sea igual.

Ejemplo de la propiedad justify-content:

propiedad justify-content, ejemplos

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        padding: 10px;
        margin-bottom: 20px;
        background-color: #1faadb;
      }
      .flex-start {
        justify-content: flex-start;
      }
      .flex-end {
        justify-content: flex-end;
      }
      .center {
        justify-content: center;
      }
      .space-between {
        justify-content: space-between;
      }
      .space-around {
        justify-content: space-around;
      }
      .flex-container > div {
        width: 28%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container > div.item-two {
        width: 18%;
      }
    </style>
  </head>
  <body>
    <p>flex-start</p>
    <div class="flex-container flex-start">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>flex-end</p>
    <div class="flex-container flex-end">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>center</p>
    <div class="flex-container center">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-between</p>
    <div class="flex-container space-between">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-around</p>
    <div class="flex-container space-around">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
  </body>
</html>

Try it Yourself »

Cambia el valor de la propiedad justify-content para ver cómo se alinean los elementos.

La propiedad align-items ¶

La propiedad align-items se usa para alinear elementos a lo largo del eje cruzado. Es justo lo contrario de la propiedad justify-content, que alinea los elementos a lo largo del eje principal.

Los valores de align-items son los siguientes:

• stretch (predeterminado) - los elementos se estiran para llenar el contenedor.
• flex-start - los elementos se apilan al inicio cruzado del contenedor.
• flex-end- los elementos se apilan al final cruzado del contenedor.
• center- los elementos se apilan en el centro del eje cruzado.
• baseline - los elementos se alinean de modo que sus líneas base queden alineadas.

INFO

Nota: Si la altura del contenedor flex está restringida, el valor stretch puede hacer que el contenido del elemento flex desborde el elemento.

Ejemplo de la propiedad align-items:

propiedad align-items, ejemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center; /* Use another value to see the result */
        height: 250px;
        padding: 15px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 15%;
        height: 100%;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one {
        height: 60%;
      }
      .flex-container .three {
        height: 40%;
      }
      .flex-container .four {
        height: 70%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
    </div>
  </body>
</html>

Try it Yourself »

En nuestro ejemplo usamos el valor center para centrar los elementos en el eje cruzado. Prueba otros valores y observa el resultado.

La propiedad align-content ¶

La propiedad align-content se usa para alinear las líneas de un contenedor flex dentro del contenedor cuando hay espacio extra en el eje cruzado, del mismo modo que justify-content alinea elementos individuales dentro del eje principal.

INFO

Nota: La propiedad align no funciona cuando solo hay una línea en el contenedor flex.

Los valores de align-content y su significado son los siguientes:

• stretch (predeterminado) - las líneas se estiran para ocupar el espacio disponible.
• flex-start - las líneas se agrupan al inicio del contenedor.
• flex-end - las líneas se agrupan al final del contenedor.
• center - las líneas se agrupan en el centro del contenedor.
• space-between - las líneas se distribuyen uniformemente; la primera línea está al inicio del contenedor mientras que la última está al final.
• space-around - las líneas se distribuyen uniformemente con espacio igual alrededor de cada línea.

Ejemplo de la propiedad align-content:

ejemplo de la propiedad align-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end/* Use another value to see the result */;
        min-height: 250px;
        padding: 10px;
        background-color: #1faadb;
      }
      .flex-container>div {
        width: 45%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one,
      .flex-container .nine {
        width: 23%;
      }
      .flex-container .two,
      .flex-container .six {
        width: 9%;
      }
      .flex-container .three {
        width: 25%;
      }
      .flex-container .four {
        width: 35%;
      }
      .flex-container .five,
      .flex-container .eleven {
        width: 32%;
      }
      .flex-container .seven,
      .flex-container .ten {
        width: 6%;
      }
    </style>
  </head>
  <body>
    <p>flex-end</p>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eight"></div>
      <div class="nine"></div>
      <div class="ten"></div>
      <div class="eleven"></div>
    </div>
  </body>
</html>

Try it Yourself »

La propiedad gap

La propiedad gap se usa para definir el espacio entre los elementos flex.

La propiedad flex-flow ¶

Esta es una propiedad abreviada para las propiedades individuales flex-direction y flex-wrap, que juntas definen los ejes principal y cruzado del contenedor flex. El valor predeterminado es row nowrap.

INFO

Nota: Las direcciones de flex-flow dependen del modo de escritura, por lo que en un contexto rtl (de derecha a izquierda) el contenido se invertirá respectivamente.

Ejemplo de la propiedad flex-flow:

propiedad flex-flow, ejemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title> 
    <style>
      .flex-container {
        display: flex;
        flex-flow: row-reverse wrap; /* Use another value to see the result */
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Try it Yourself »

Puedes elegir otro valor para ver cómo cambia la posición de los elementos.

Propiedades de los elementos flex ¶

La propiedad order

Por defecto, los elementos se colocan en el orden en que aparecen en el código fuente (empezando por el grupo ordinal con el número más bajo y avanzando hacia arriba). Para cambiar el orden de los elementos en el contenedor flex se usa la propiedad order.

La propiedad order establece el orden de los elementos flex asignándolos a grupos ordinales. Toma un único valor entero, que define el grupo ordinal al que pertenece el elemento flex. El valor predeterminado es 0.

Ejemplo de la propiedad order:

orden de la propiedad flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-flow: row wrap;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
      .item-one { 
        order: 1;
      }
      .item-four {
        order: -1;
      }
      .item-five { 
        order: 0;
      }
      .item-three { 
        order: 2;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one">1</div>
      <div class="item-two">2</div>
      <div class="item-three">3</div>
      <div class="item-four">4</div>
      <div class="item-five">5</div>
    </div>
  </body>
</html>

Try it Yourself »

La propiedad align-self ¶

La propiedad se usa para alinear individualmente los elementos dentro del contenedor flex. Los elementos flex se alinean en el eje cruzado de la línea del contenedor flex (igual que justify-content, pero en la dirección perpendicular). Cuando se establece, la propiedad align-self anula la alineación especificada por align-items.

INFO

Nota: Si cualquiera de los márgenes en el eje cruzado del elemento está establecido en auto, entonces align-self se ignora.

La propiedad align-self tiene los mismos valores que align-items. Se enumeran a continuación para tu comodidad.

• stretch (predeterminado) - los elementos se estiran para llenar el contenedor.
• flex-start - los elementos se apilan al inicio cruzado del contenedor.
• flex-end- los elementos se apilan al final cruzado del contenedor.
• center - los elementos se apilan en el centro del eje cruzado.
• baseline - los elementos se alinean de modo que sus líneas base queden alineadas.

Ejemplo de la propiedad align-self:

ejemplo de la propiedad align-self

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        height: 300px;
        padding: 10px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        height: 80%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      div.item-two {
        width: 20%; 
      }
      div.item-three {
        align-self: flex-end;
        height: 80px; 
        margin: 0 10%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one"></div>
      <div class="item-two"></div>
      <div class="item-three"></div>
      <div class="item-four"></div>
    </div>
  </body>
</html>

Try it Yourself »

La propiedad flex-grow ¶

La propiedad flex-grow define la capacidad de un elemento para crecer si es necesario. Establece el factor de crecimiento flex (en relación con el resto de los elementos dentro de un contenedor), que especifica el espacio que el elemento debe ocupar en el contenedor al distribuir el espacio positivo.

La propiedad toma un valor sin unidad que sirve como proporción.

INFO

Nota: El valor no puede ser un número negativo.

Si todos los elementos del contenedor tienen el mismo valor de flex-grow (por ejemplo, 1), entonces todos los elementos tienen el mismo tamaño en el contenedor.

Si el tamaño de uno de los elementos flex es diferente (por ejemplo, 2), entonces este elemento ocupará el doble de espacio en relación con el tamaño de los demás elementos (cuyo tamaño está establecido en 1).

Ejemplo de la propiedad flex-grow:

propiedad flex-grow, ejemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        margin-bottom: 20px;
      }
      .flex-container div {
        flex-grow: 0.2;
        padding: 30px 5px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-grow: 5;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div><span>5</span>
      </div>
    </div>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

TIP

Recomendamos usar la propiedad abreviada flex en lugar de flex-grow para controlar la flexibilidad, ya que restablece correctamente cualquier componente no especificado para adaptarse a usos comunes.

La propiedad flex-shrink ¶

La propiedad flex-shrink se establece para permitir que un elemento flex se reduzca. Especifica el espacio que el elemento debe ocupar en el contenedor cuando se distribuye el espacio negativo.

La propiedad toma un valor sin unidad.

INFO

Nota: El valor no puede ser un número negativo.

Por defecto, todos los elementos flex pueden reducirse, pero si establecemos el valor en 0 (no reducir), conservarán el tamaño original.

Ejemplo de la propiedad flex-shrink:

ejemplo de la propiedad flex-shrink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
      }
      .flex-container div {
        width: 120px;
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-shrink: 0;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
      <div>
        <span>6</span>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

TIP

Recomendamos usar la propiedad abreviada flex en lugar de flex-shrink para controlar la flexibilidad, ya que restablece correctamente cualquier componente no especificado para adaptarse a usos comunes.

La propiedad flex-basis ¶

La propiedad flex-basis establece el tamaño inicial de un elemento flex, antes de que el espacio restante se distribuya según los factores flex. La propiedad se especifica mediante la palabra clave content o width.

Los valores de flex-basis son los siguientes:

• auto (predeterminado) - la longitud es igual a la longitud del elemento flexible.
• width - una longitud absoluta, o un porcentaje de la propiedad de tamaño principal del contenedor flex padre, o la palabra clave auto. Los valores negativos no son válidos.
• content - determina el tamaño automático, basado en el contenido del elemento flex.
• initial - establece esta propiedad en su valor predeterminado.

INFO

Nota: La propiedad content aún no tiene buen soporte, por lo que no es fácil entender qué hacen sus equivalentes max-content, min-content y fit-content.

Ejemplo de la propiedad flex-basis:

propiedad flex-basis, ejemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        background-color: #8ebf42;
      }
      .flex-container div {
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
        background-color: #fff;
      }
      .flex-container div.four {
        flex-basis: 25%;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div class="four">
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

La propiedad flex ¶

La propiedad flex es la abreviatura de flex-grow, flex-shrink y flex-basis juntas. flex-shrink y flex-basis son opcionales.

Entre otros valores, esta propiedad puede aceptar auto (1 1 auto) o none (0 0 auto).

TIP

Recomendamos encarecidamente usar la propiedad abreviada flex en lugar de las propiedades individuales.

Ejemplo de la propiedad flex:

flex en lugar de flex-shrink, ejemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        height: 150px;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .second > div {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="flex-container second">
      <div></div>
      <div></div>
      <div></div>
    </div> 
  </body>
</html>

Try it Yourself »

INFO

Nota: Las propiedades CSS float, clear y vertical-align no tienen efecto en los elementos flex.

Ejemplos de Flexbox ¶

Veamos algunos ejemplos de flexbox en CSS y qué tipo de diseños puedes usar en tus propios proyectos web.

Centrado vertical y horizontal de elementos

Centrar elementos por todos los medios disponibles en CSS siempre ha sido un problema. Con la llegada de Flexbox, este problema se resuelve fácilmente. Con las propiedades align-items, align-self y justify-content puedes alinear elementos tanto vertical como horizontalmente.

Ejemplo de las propiedades align-items, align-self y justify-content para centrar elementos vertical y horizontalmente:

Centrado vertical y horizontal de elementos Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 70px;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Barra de navegación adaptable con búsqueda ¶

Usando Flexbox puedes crear una barra de navegación con los elementos del menú alineados a la izquierda y la barra de búsqueda alineada a la derecha (o viceversa). La barra de navegación es adaptable; se expande o se contrae según el tamaño de la pantalla.

Ejemplo de la barra de navegación adaptable:

ejemplo de barra de navegación con flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main-nav {
        display: flex;
        padding: 15px;
        border-radius: 5px;
        background: #1c87c9;
        color: #fff;
        font-weight: 500;
      }
      .main-nav > ul {
        display: flex;
        flex: 2;
        padding: 0;
        margin: 0;
        list-style-type: none;
      }
      .main-nav li {
        margin-right: 20px;
      }
      .main-nav > form {
        display: flex;
        justify-content: flex-end;
        flex: 1;
      }
      .main-nav input {
        flex: 1;
        padding: 5px;
      }
      .main-nav button {
        padding: 0 20px;
        margin-left: 10px;
        border: 0;
        border-radius: 20px;
        background: #fff;
        color: #666;
      }
      @media screen and (max-width: 575px) {
        .main-nav {
          flex-direction: column;
        }
        .main-nav ul {
          margin-bottom: 10px;
        }
      }
    </style>
  </head>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Home</li>
        <li>About us</li>
        <li>Services</li>
        <li>Contact us</li>
      </ul>
      <form>
        <input type="search" placeholder="Search" />
        <button type="button">Go</button>
      </form>
    </nav>
  </body>
</html>

El diseño Holy Grail ¶

El patrón de diseño Holy Grail es muy popular en la web. Incluye encabezado, pie de página y el área principal de contenido con navegación de ancho fijo a la izquierda, contenido en el centro y una barra lateral de ancho fijo a la derecha.

Ejemplo del diseño Holy Grail:

diseño Holy Grail con flexbox, ejemplo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
        font-size: 18px;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      .main {
        display: flex;
        flex: 1;
      }
      .main > article {
        flex: 1;
      }
      .main > nav,
      .main > aside {
        flex: 0 0 20vw;
        background: #d5dce8;
      }
      .main > nav {
        order: -1;
      }
      header,
      footer {
        background: #1c87c9;
        height: 15vh;
      }
      header,
      footer,
      article,
      nav,
      aside {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>

Práctica

¿Cuáles de las siguientes son propiedades de Flexbox en CSS?

flex-directionflex-wrapdisplay-inlinejustify-contentalign-contenttext-align