Ejercicios flexbox con align-items

  • Por
Práctica con la propiedad align-items de los elementos con display flex, una de las principales posibilidades del modelo de maquetación flexbox css.

En el Manual de Flexbox hemos abordado diversas informaciones básicas sobre este modelo de posicionamiento CSS. Sin embargo nos quedan pendientes algunas prácticas para facilitar asimilar los conceptos explicados.

En este artículo vamos a practicar con otra de las principales posibilidades de Flexbox, que es la definida por el atributo align-items, que ofrece bastantes variantes para el posicionamiento de elementos.

Lo primero que se debe aclarar es que align-items es uno de los atributos que modifican el comportamiento de los items, pero que se aplica sobre los contenedores flexbox. Recuerda que el contenedor es el elemento que tiene "display: flex" o "display: inline-flex" y que los ítem son sus hijos directos. El atributo que nos ocupa, align-items, se aplica sobre los contendores flex, como se describió en el artículo Propiedades para el contenedor Flexbox.

Alineación vertical / horizontal de los ítem

Como ya se describió, el valor de align-items afecta al eje contrario de disposición de los elementos flex. Es decir, si los elementos se colocan en una fila (en la horizontal), align-items define el comportamiento en la vertical. Si los elementos se colocan en columnas (la vertical), align-items afecta a su posición en la horizontal.

Para explicar ésto vamos a estudiar cómo se comporta align-items dependiendo de si los elementos flex se distribuyen en filas o en columnas.

Elementos dispuestos en la fila

En el caso de un contenedor flexbox donde la dirección de los elementos es la fila, align-items afecta a su posicionamiento en la vertical. Por ejemplo tenemos un contenedor flex con este CSS:

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

El atributo align-items afectará a la vertical, indicando que los elementos se coloquen en el final de la vertical. Quedarían más o menos así.

Como puedes ver, todos los elementos se ajustan abajo del todo, quedando alineados al final del eje secundario del contenedor flexbox.

Elementos dispuestos en columnas

En el caso que los elementos se dispongan en columnas, el valor que apliquemos a align-items se referirá a la horizontal, el eje secundario. Por tanto, un mismo valor flex-end, provocará que todos los elementos se coloquen a la derecha. Veamos este CSS:

ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

Fíjate que con respecto al CSS anterior, lo único que se ha cambiado es flex-direction: column; usado para indicar que los ítem se coloquen uno debajo del otro.

Ahora puedes ver la disposición en la que se colocarían los elementos.

Ejercicio con todos los posibles valores de align-items

Entendido el efecto de este atributo, vamos a ver el código del ejercicio que podemos utilizar para experimentar con todos los valores de align-items.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>align-items</title>
  <style>
    body {
      background-color: aquamarine;
      font-family: sans-serif;
    }
    ul, li {
      padding: 0; 
      list-style: none;
    }
    ul {
      display: flex;
      margin: 10px;
      margin-top: 0;
      background-color: #666;
      justify-content: space-between;
      height: 100px;
    }
    li {
      display: block;
      width: 18%;
      height: 70px;
      background-color: orangered;
      line-height: 70px;
      font-size: 1.5em;
      font-weight: bold;
      text-align: center;
      color: #fff;
      
    }
    h1 {
      margin: 20px 20px 4px 15px;
      font-size: 1.3em;
      color: darkblue;
    }
    .flexstart {
      align-items: flex-start;
    }
    .flexend {
      align-items: flex-end;
    }
    .flexcenter {
      align-items: center;
    }
    .stretch {
      align-items: stretch;
    }
    .stretch li {
      height: auto;
      line-height: 100px;
    }
    .baseline {
      align-items: baseline;
    }
  </style>
</head>
<body>
  <div class="test">
    <h1>flex-start</h1>
    <ul class="flexstart">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <div class="test">
    <h1>flex-end</h1>
    <ul class="flexend">
      <li>1</li>
      <li>2</li>
      <li style="align-self: flex-start">3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <div class="test">
    <h1>center</h1>
    <ul class="flexcenter">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <div class="test">
    <h1>Stretch</h1>
    <ul class="stretch">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <div class="test">
    <h1>Baseline</h1>
    <ul class="baseline">
      <li style="line-height: 50px;">1</li>
      <li style="line-height: 40px;">2</li>
      <li style="line-height: 80px;">3</li>
      <li>4</li>
      <li style="line-height: 30px;">5</li>
    </ul>
  </div>
</body>
</html>

Este ejercicio usa diversos bloques con los distintos valores posibles de align-items, que habíamos conocido en el artículo de Propiedades para el contenedor Flexbox.

La imagen resultando del posicionamiento de estos elementos la podemos ver a continuación.

Pero lo cierto es que este ejercicio no estaría completo si solo vemos cómo se aplica align-items cuando los elementos se sitúan en filas. Habría que verlo también para elementos que se coloquen en columnas pues entonces, tal como se ha explicado, la aplicación de align-items es sensiblemente distinta.

Podemos ver el código del siguiente ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>align-items para columnas</title>
  <style>
    body {
      background-color: aquamarine;
      font-family: sans-serif;
    }
    ul, li {
      padding: 0; 
      list-style: none;
    }
    ul {
      display: flex;
      flex-direction: column;
      margin: 10px;
      margin-top: 0;
      background-color: #666;
      justify-content: space-between;
    }
    li {
      display: block;
      background-color: orangered;
      line-height: 34px;
      font-size: 1.5em;
      font-weight: bold;
      text-align: center;
      color: #fff;
      margin: 4px 0;
      padding: 2px 15px;
    }
    h1 {
      margin: 20px 20px 4px 15px;
      font-size: 1.3em;
      color: darkblue;
    }
    .flexstart {
      align-items: flex-start;
    }
    .flexend {
      align-items: flex-end;
    }
    .flexcenter {
      align-items: center;
    }
    .stretch {
      align-items: stretch;
    }
    .stretch li {
      height: auto;
      line-height: 100px;
    }
    .baseline {
      align-items: baseline;
    }
  </style>
</head>
<body>
  <div class="test">
    <h1>flex-start</h1>
    <ul class="flexstart">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div class="test">
    <h1>flex-end</h1>
    <ul class="flexend">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div class="test">
    <h1>center</h1>
    <ul class="flexcenter">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div class="test">
    <h1>Stretch</h1>
    <ul class="stretch">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>

Y a continuación el resultado que deberíamos apreciar para cada valor de align-items.

Nota: he quitado en este caso el valor "baseline" de align-items, puesto que no tiene mucho sentido una alineación con respecto a la línea de texto, si cada elemento está abajo del anterior.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Arthur

11/9/2017
Flexbox
Como sugerencia qué pensáis que es mejor, Flexbox o CSS Grid?

midesweb

11/9/2017
CSS Grid Layout Vs Flexbox
No creo que sea relevante hacer esa comparativa, ya que son dos sistemas que puedes usar para cosas distintas. Flexbox es una forma de definir el posicionamiento de elementos, mucho más precisa y versátil de lo que teníamos antes. CSS Grid es un sistema de rejilla, para usar columnas y filas en maquetación. Es algo más rígido que Flexbox, aunque es cierto que podría usarse para cosas similares. Pero no es ese el objetivo. Flexbox te permite hacer cosas de manera más sencilla y versátil, en los que no necesitas la complejidad de una rejilla completa. Es útil para pequeñas interfaces. o interfaces complejas, mientras que CSS Grid Layout es apropiado para definir la plantilla de un documento completo.