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:
Propiedad | Descripción |
---|---|
justify-content | Alineación horizontal del contenido. |
align-content | Alineación vertical del contenido. |
place-content | Abreviatura de las dos anteriores. |
Alineación dentro de los ítems:
Propiedad | Descripción |
---|---|
justify-items | Alineación horizontal dentro de los ítems. |
align-items | Alineación vertical dentro de los ítems. |
place-items | Abreviatura de las dos anteriores. |
Alineación de un ítem específico:
Propiedad | Descripción |
---|---|
justify-self | Alineación horizontal de un ítem específico. |
align-self | Alineación vertical de un ítem específico. |
place-self | Abreviatura de las dos anteriores. |
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:
Valor | Descripción |
---|---|
flex-start | El contenido se alinea agrupado al principio del contenedor. |
flex-end | El contenido se alinea agrupado al final del contenedor. |
start | El contenido se alinea agrupado al principio de la línea. |
end | El contenido se alinea agrupado al final de la línea. |
center | El contenido se alinea agrupado al centro. |
space-between | Se distribuye espacio interior entre ítems. |
space-around | El mismo espacio a cada lado del ítem. |
space-evenly | Espacio equitativo alrededor de los ítems. |
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
:
123456789
Resultado usando los valores flex-end
y end
:
123456789
Resultado usando el valor center
:
123456789
Resultado usando el valor space-between
:
123456789
Resultado usando el valor space-around
:
123456789
Resultado usando el valor space-evenly
:
123456789
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:
Valor | Descripción |
---|---|
normal | Valor por defecto. Es similar a stretch . |
stretch | Los ítems se estiran dentro del contenedor. |
flex-start | Los ítems se ubican al principio del contenedor. |
flex-end | Los ítems se ubican al final del contenedor. |
start | Los ítems se ubican al principio de la línea. |
end | Los ítems se ubican al final de la línea. |
center | Los ítems se centran en el contenedor. |
baseline | Los ítems se alinean desde su línea de base. |
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
:
123456789
Resultado usando los valores flex-start
y start
:
123456789
Resultado usando los valores flex-end
y end
:
123456789
Resultado usando el valor center
:
123456789
Resultado usando el valor baseline
:
123456789
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:
Valor | Descripción |
---|---|
normal | Valor por defecto. Es similar a stretch . |
stretch | El ítem se estira dentro del contenedor. |
flex-start | El ítem se coloca al principio del contenedor. |
flex-end | El ítem se coloca al final del contenedor. |
start | El ítem se coloca al principio de la línea. |
end | El ítem se coloca al final de la línea. |
center | El ítem se centra en el contenedor. |
baseline | El ítem se alinea desde su línea de base. |
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
:
123456789
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
:
123456789
Resultado usando los valores flex-end
y end
:
123456789
Resultado usando el valor center
:
123456789
Resultado usando el valor baseline
:
123456789
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).