CSS: Alineación

Dentro de la maquetación web mediante las cajas flexibles (flex) o las cuadrículas (grid), puede surgir la necesidad de alinear los elementos hijos (ítems) respecto a su elemento contenedor. En CSS existe una serie de propiedades específicas que permiten tratar diferentes tipos de alineaciones.

Alineación de contenido:

Alineación dentro de los ítems:

Alineación de un ítem específico:

Alineación de contenido

Mediante las propiedades justify-content y align-content es posible definir cómo el navegador web alinea y distribuye el espacio entre los diferentes elementos hijos (ítems) de una caja flexible o una cuadrícula. La alineación se calcula después de aplicar los tamaños y los márgenes.

La propiedad justify-content alinea el contenido en horizontal, mientras que align-content lo hace en vertical. En el caso de las cajas flexibles, el primero se refiere al eje principal y el segundo al eje secundario, que solo se aplicará en caso de existir múltiples líneas, es decir, que los elementos hijos (ítems) desborden, se tengan que reubicar y salten a una nueva línea.

Lista de valores:

Los valores flex-start y flex-end colocan los elementos agrupados al comienzo y final del contenedor; por defecto: de izquierda a derecha y de arriba a abajo. En cambio, start y end se agrupan al comienzo de la línea, y se ajustan de forma automática según la dirección de escritura del documento.

Vamos a ver varios ejemplos mediante el sistema de cuadrículas (grid), utilizando las propiedades justify-content (en horizontal) y align-content (en vertical). Los mismos ejemplos horizontales sirven para las cajas flexibles (flex): la propiedad justify-content para el eje principal y la propiedad align-content para el eje secundario cuando la caja flexible tiene más de una línea.

Código HTML:

<div class="contenedor">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

Código CSS:

.contenedor {
  background: teal;
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(3, 30px);
  height: 150px;
  justify-content: flex-start;
  align-content: flex-start;
}

Resultado usando los valores flex-start y start:

1

2

3

4

5

6

7

8

9

Resultado usando los valores flex-end y end:

1

2

3

4

5

6

7

8

9

Resultado usando el valor center:

1

2

3

4

5

6

7

8

9

Resultado usando el valor space-between:

1

2

3

4

5

6

7

8

9

Resultado usando el valor space-around:

1

2

3

4

5

6

7

8

9

Resultado usando el valor space-evenly:

1

2

3

4

5

6

7

8

9

Alineación de elementos

Con CSS también es posible alinear los elementos de una cuadrícula dentro de las filas o las columnas. Para el eje horizontal se usa la propiedad justify-items, mientras que para el vertical se usa align-items. Estas dos propiedades CSS se aplican directamente sobre el elemento contenedor (padre), y el resultado de la alineación se verá en los elementos hijos (ítems).

El efecto de la propiedad justify-items dependerá del tipo de diseño que se esté realizando. En elementos de bloque, alinea los elementos dentro de su bloque contenedor. En las cajas flexibles (flex), esta propiedad se ignora, mientras que en las cuadrículas (grid), alinea los elementos dentro de sus áreas.

En el caso de la propiedad align-items, cuando se trabaja con cajas flexibles (flex), lo que hace esta propiedad es controlar la alineación de los elementos del eje secundario. En cambio, si se trabaja con un sistema de cuadrículas (grid), permite controlar la alineación de los elementos dentro de sus áreas.

Lista de valores:

Cuando se usa el valor normal, el efecto depende del modo de diseño que se esté utilizando. Por ejemplo, en bloques que tengan una posición absoluta se comporta como start. En bloques con posición estática, elementos flexibles (flex) y elementos de cuadrícula (grid) se comporta como stretch.

Vamos a ver varios ejemplos mediante el sistema de cuadrículas (grid), utilizando las propiedades justify-items (en horizontal) y align-items (en vertical). Los cambios se aplicarán sobre el elemento hijo (ítem) número 9.

Código HTML:

<div class="contenedor">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

Código CSS:

.contenedor1 {
  background: teal;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  height: 150px;
  justify-items: normal;
  align-items: normal;
}

Resultado usando los valores normal y stretch:

1

2

3

4

5

6

7

8

9

Resultado usando los valores flex-start y start:

1

2

3

4

5

6

7

8

9

Resultado usando los valores flex-end y end:

1

2

3

4

5

6

7

8

9

Resultado usando el valor center:

1

2

3

4

5

6

7

8

9

Resultado usando el valor baseline:

1

2

3

4

5

6

7

8

9

Alineación individualizada

Si lo que se quiere es contradecir la alineación de elementos para aplicar una alineación individualizada, se debe usar las propiedades justify-self para el eje horizontal y align-self para el eje vertical. A diferencia de las anteriores, estas propiedades CSS se aplican sobre los elementos hijos (ítems).

Cuando se utiliza una de estas dos propiedades, su valor sobreescribe el que puedan tener las propiedades justify-items y align-items. Por tanto, las propiedades justify-self y align-self tiene prioridad.

Lista de valores:

Vamos a ver algunos ejemplos similares a los anteriores, usando también el sistema de cuadrículas (grid), pero esta vez con las propiedades CSS justify-self (en horizontal) y align-self (en vertical), de uso individual.

Código HTML:

<div class="contenedor">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

Todos los ítems estarán centrados excepto el noveno. Código CSS:

.contenedor21 {
  background: teal;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  height: 150px;
  justify-items: center;
  align-items: center;
}

.item-9 {
  justify-self: normal;
  align-self: normal;
}

Resultado usando los valores normal y stretch:

1

2

3

4

5

6

7

8

9

Todos los ítems se alinean por defecto excepto el noveno. Código CSS:

.contenedor21 {
  background: teal;
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  height: 150px;
  justify-items: normal;
  align-items: normal;
}

.item-9 {
  justify-self: flex-start;
  align-self: flex-start;
}

Resultado usando los valores flex-start y start:

1

2

3

4

5

6

7

8

9

Resultado usando los valores flex-end y end:

1

2

3

4

5

6

7

8

9

Resultado usando el valor center:

1

2

3

4

5

6

7

8

9

Resultado usando el valor baseline:

1

2

3

4

5

6

7

8

9

Abreviaturas para alinear

Para facilitar la maquetación, CSS provee algunas propiedades específicas que permiten unificar las anteriores, agrupándolas según su sufijo. Por tanto, existe una abreviatura (shorthand) para la alineación de contenido, otra para la alineación dentro de los ítems y otra para alinear de forma individualizada.

La propiedad place-content es una abreviatura (shorthand) que unifica las propiedades con el sufijo *-content, y son las siguientes: align-content y justify-content. Admite dos parámetros separados por un espacio, primero el eje vertical y después el eje horizontal. Por ejemplo:

.contenedor {
  place-content: center space-between;
}

Por su parte, la propiedad place-items es una abreviatura (shorthand) para las propiedades align-items y justify-items, que como se puede observar, son las que tienen el sufijo *-items. También admite dos parámetros: uno para el eje vertical y otro para el eje horizontal. Por ejemplo:

.contenedor {
  place-items: stretch flex-start;
}

Finalmente, la propiedad place-self es una abreviatura (shorthand) que unifica las propiedades align-self y justify-self, que son las terminadas con el sufijo *-self. Al igual que las otras dos anteriores, esta propiedad admite dos parámetros: primero el horizontal y luego el vertical. Por ejemplo:

.contenedor {
  place-self: start end;
}

Para estas tres propiedades, en el caso de que solo se introduzca un parámetro se utilizará para los dos ejes (el horizontal y el vertical).