Alineación items
justify-content align-items align-content align-self place-content order

<< Flex Flexibilidad a los items >>

Tenemos una serie de propiedades dentro de flex para alinear correctamente nuestros ítems. La propiedad justify-content nos permite alinear los ítems en el eje principal (por defecto, eje horizontal), con la propiedad align-items alineamos los elementos en el eje secundario (por defecto el eje vertical), con la propiedad align-content podemos alinear el contenido del eje secundario entre líneas (sólo para contenedores multilínea). Vamos a ver los valores que puede tener cada una de estas propiedades.

justify-content

La propiedad justify-content nos sirve para posicionar los elementos del contenedor en una posición concreta a lo largo del eje principal con los valores: start(agrupa los ítems al principio del eje), end(agrupa los ítems al final del eje), center(agrupa los ítems al centro del eje principal), space-between(Los items flex se distribuyen uniformemente sobre la línea.), space-around(Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo), space-evenly(funciona parecido a space-around pero con un espacio igual alrededor de ellos). Ver ejemplo aquí.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejemplo flex</title>
    <link rel="stylesheet" href="flex.css" />
  </head>

  <body>
    <header class="header">
      <h1 class="titulo"><a href="#">Mi Aules</a></h1>
      <nav class="menu">
        <a href="#" class="menu-item">Inicio</a>
        <a href="#" class="menu-item">Formación</a>
        <a href="#" class="menu-item">Noticias</a>
        <a href="#" class="menu-item">Soporte</a>
      </nav>
    </header>
    <main class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </main>
  </body>
</html>

align-items

La propiedad align-items se encarga de alinear los ítems en el eje secundario, cuando estamos trabajando sin wrap. Los valores que puede tomar esta propiedad son: start(alinea los ítems al principio del eje secundario), end(alinea los ítems al final del eje secundario), center(alinea los ítems al centro del eje secundario), strech(alinea los ítems estirándolos con el objetivo que cubran desde el principio hasta el final del contenedor), baseline(alinea los ítems según la base del contenido de los ítems del contenedor). Ver ejemplo aquí.

* {
  margin: 0;
  padding: 0;
}
header {
  background-color: azure;
  height: 11vh;
  font-size: 3vh;
  text-align: center;
  nav {
    display: flex;
    gap: 10px 50px;
    justify-content: center;
  }
  a {
    text-decoration: none;
    color: black;
  }
}

.container{
    padding-top: 50px;
    display: flex;
    gap: 5px;
    justify-content: start;
/*     justify-content: end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly; */

    flex-direction: column; /* Cambiamos el eje para align-items */
    align-items: start;
    align-items: center;
    align-items: end;
    align-items: strech;
    align-items: baseline; 

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
    }
}

align-content

La propiedad align-content nos va a servir cuando estemos trabajando con contenedores multilínea (flex-wrap) para alinear cada una de las líneas del contenedor. Los valores que puede tener esta propiedad son: start(agrupa los ítems al principio del eje principal), end(agrupa los ítems al final del eje principal), center(agrupa los ítems al centro del eje principal), space-between(distribuye los ítems desde el principio al final), space-around(distribuye los ítems dejando el mismo espacio a los lados de cada uno), stretch(estira los ítems haciendo que ocupen de forma equitativa el espacio del contenedor). Ver ejemplo aquí. Es importante tener en cuenta que con esta propiedad estamos modificando la disposición vertical (eje principal), salvo que hayamos usado la propiedad flex-direction: column; donde el eje principal pasaría a ser el horizontal.

* {
  margin: 0;
  padding: 0;
}
header {
  background-color: azure;
  height: 11vh;
  font-size: 3vh;
  text-align: center;
  nav {
    display: flex;
    gap: 10px 50px;
    justify-content: center;
  }
  a {
    text-decoration: none;
    color: black;
  }
}

.container{
    padding-top: 50px;
    display: flex;
    gap: 5px;
    /* justify-content: start; */
/*     justify-content: end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly; */


    /* Cambiamos el eje para align-items */
    /* flex-direction: column;  */
    /* Debe ser sin wrap */
    /* align-items: start; 
    align-items: center;
    align-items: end;
    align-items: strech;
    align-items: baseline;  */

    flex-wrap: wrap;
    
    max-width: 500px;
    min-height: 800px;

    align-content: start;
    /* align-content: end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch; */

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
    }
}

align-self

La propiedad align-self funciona igual que align-items, pero se utiliza sobre un hijo y no sobre el elemento padre(container). Con esta propiedad podemos cambiar el comportamiento de align-items y sobreescribirlo con comportamientos específicos para ítems concretos que no queremos que actúen igual, los valores que puede tener son: start(alinea los ítems al principio del eje secundario), end(alinea los ítems al final del eje secundario), center(alinea los ítems al centro del eje secundario), strech(alinea los ítems estirándolos con el objetivo que cubran desde el principio hasta el final del contenedor), baseline(alinea los ítems según la base del contenido de los ítems del contenedor) y auto(hereda el valor de align-items del padre, que si no se ha definido por defecto será strech). Ver ejemplo aquí.

* {
  margin: 0;
  padding: 0;
}
header {
  background-color: azure;
  height: 11vh;
  font-size: 3vh;
  text-align: center;
  nav {
    display: flex;
    gap: 10px 50px;
    justify-content: center;
  }
  a {
    text-decoration: none;
    color: black;
  }
}

.container{
    padding-top: 50px;
    max-width: 1600px;
    min-height: 610px;
    background-color: aquamarine;
    
    display: flex;
    gap: 5px;    
    justify-content: center;    
    align-items: end;       /* vertical */
    
    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
    }
    .item10{
        align-self: center;
    }
}

place-content

Podemos establecer las propiedades align-content y justify-content con la propiedad place-content donde el primer parámetro es align-content y el segundo justify-content. En el caso de haber sólo un parámetro entonces se aplicará el mismo en ambas propiedades. Ver ejemplo aquí.

.container{
    padding-top: 50px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    
    max-width: 500px;
    min-height: 800px;

    place-content: start start;

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
    }
}

order

Dentro del apartado de las alineaciones, tenemos order, propiedad mediante la cual podemos establecer el orden de los elementos con números. Por defecto, los hijos de un contenedor tendrán un valor de 0. En el caso de indicar un valor la propiedad order, entonces los ítems se irán colocando según el valor dado del más pequeño (incluido negativos) al más grande. Ver ejemplo aquí.

.container{
    padding-top: 50px;
    background-color: aquamarine;
    display: flex;
    gap: 5px;
    
    justify-content: center;    
    align-items: end;       /* vertical */
    max-width: 1600px;
    min-height: 610px;

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
        order: 10
    }
    .item10{
        align-self: center;
        order: 2
    }
    .item4{
        order: 6;
    }
}