05. Propiedades de alineación

Ahora que disponemos de un control básico del contenedor de estos ítems flexibles, debemos conocer las propiedades existentes dentro de flexbox para disponer los ítems dependiendo de nuestro objetivo. Echemos un vistazo a 4 propiedades interesantes para ello, la primera de ellas actúa en el eje principal, mientras que el resto en el eje secundario.

De esta pequeña lista, hay que centrarse en primer lugar en la primera y la tercera propiedad, que son las más importantes.

• justify-content: Se utiliza para alinear los ítems del eje principal (por defecto, el horizontal).
• align-items: Usada para alinear los ítems del eje secundario (por defecto, el vertical).

Sobre el eje principal

La primera propiedad, justify-content, sirve para colocar los ítems de un contenedor mediante una disposición concreta a lo largo del eje principal:

Una vez entendido este caso, debemos atender a la propiedad align-content, que es un caso particular del anterior. Nos servirá cuando estemos tratando con un contenedor flex multilinea, que es un contenedor en el que los ítems no caben en el ancho disponible, y por lo tanto, el eje principal se divide en múltiples líneas (por ejemplo, usando flex-wrap: wrap).

De esta forma, align-content servirá para alinear cada una de las líneas del contenedor multilinea. Los valores que puede tomar son los siguientes.

Con estos valores, observaremos como cambia la disposición en vertical (partimos de que estamos utilizando flex-direction: row, y el eje principal es horizontal) de los ítems que están dentro de un contenedor multilinea.

Ejm

      .container {
        background: #ccc;
        display: flex;
        width: 200px;
        height: 200px;
        flex-wrap: wrap;
        align-content: flex-end;
      }

      .item {
        background: #777;
        width: 50%;
        height: 50px;
      }

Sobre el eje secundario

La otra propiedad importante de este apartado es align-items, que se encarga de alinear los ítems en el eje secundario del contenedor. Hay que tener cuidado de no confundir align-content con align-items, puesto que el primero actúa sobre cada una de las líneas de un contenedor multilinea (no tiene efecto sobre contenedores de una sola línea), mientras que align-items lo hace sobre la línea actual. Los valores que puede tomar son los siguientes.

Por otro lado, la propiedad align-self actúa exactamente igual que align-items, sin embargo es la primera propiedad de flexbox que vemos que se utiliza sobre un ítem hijo específico y no sobre el elemento contenedor. Salvo por este detalle, funciona exactamente igual que align-items.

Gracias a ese detalle, align-self nos permite cambiar el comportamiento de align-items y sobreescribirlo con comportamientos específicos para ítems concretos que no queremos que se comporten igual que el resto. La propiedad puede tomar los siguientes valores.

Atajo: alineaciones

Existe una propiedad que sirve de atajo con la que se pueden establecer los valores de align-content y de justify-content de una sola vez, denominada place-content.

      .container {
        display: flex;
        place-content: flex-start flex-end;
        /* Equivalente a... */
        align-content: flex-start;
        justify-content: flex-end;
      }