Propiedad align-items
La propiedad align-items establece la alineación
de los elementos a lo largo del eje transversal para bloques flex
y a lo largo del eje vertical para grids. Se aplica
al elemento padre.
Sintaxis
selector {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Valores
| Valor | Descripción |
|---|---|
flex-start |
Los bloques están pegados al inicio del eje transversal (vertical). |
flex-end |
Los bloques están pegados al final del eje transversal (vertical). |
center |
Los bloques están centrados en el eje transversal (vertical). |
baseline |
Los elementos se alinean según su línea base. La línea base
es una línea imaginaria que pasa por el borde inferior de los
caracteres sin tener en cuenta los trazos descendentes, como en las letras 'p' y 'y'.
|
stretch |
Los bloques se estiran, ocupando todo el espacio disponible a lo largo del eje transversal,
pero aún se tienen en cuenta min-width y max-width, si están establecidos.
Si se establece el ancho y la altura para los elementos - stretch será ignorado.
|
Valor por defecto: stretch.
Ejemplo . Valor stretch
Actualmente el eje principal está dirigido de izquierda a derecha, y a lo largo del eje transversal los elementos se estiran a toda la altura:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
border: 1px solid #696989;
}
:
Ejemplo . Valor stretch + dimensiones del elemento
Actualmente para los elementos está establecido el ancho y la altura,
por lo tanto el valor stretch para la propiedad
align-items será ignorado:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: stretch;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Ejemplo . Valor flex-start sin dimensiones del elemento
Actualmente los elementos estarán pegados arriba:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
border: 1px solid #696989;
}
:
Ejemplo . Valor flex-start + dimensiones del elemento
Actualmente los elementos seguirán estando pegados arriba, sin embargo tendrán un ancho y altura establecidos:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Ejemplo . Valor flex-end + dimensiones del elemento
Actualmente los elementos estarán pegados abajo:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: flex-end;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Ejemplo . Valor center + dimensiones del elemento
Actualmente los elementos estarán centrados a lo largo del eje transversal (en este caso verticalmente):
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: center;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Ejemplo . Valor center, elementos de diferente tamaño
Actualmente los elementos tienen diferente tamaño en altura
(ahora se expanden por el texto, pero también se puede
establecer height), el ancho es igual para todos,
ya que está establecida la propiedad width:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: center;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
border: 1px solid #696989;
}
:
Ejemplo . Valor baseline, elementos de diferente tamaño
Y así es como se ve la alineación por línea base:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: flex;
align-items: baseline;
flex-direction: row;
border: 1px solid #696989;
}
#parent > div {
width: 130px;
line-height: 1;
border: 1px solid #696989;
}
:
Ejemplo . Alineación al inicio del eje vertical en grid
Alineemos nuestros elementos dentro de las celdas al inicio del eje vertical:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: flex-start;
grid-template-columns: 100px 100px;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Y ahora veamos nuestro grid en el depurador del navegador:
Ejemplo . Alineación al centro del eje vertical en grid
Y ahora alineemos nuestros elementos en las celdas al centro del eje vertical:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: center;
grid-template-columns: 100px 100px;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Veamos la visualización del grid en el depurador:
Ejemplo . Alineación al final del eje vertical en grid
Cambiemos nuevamente la alineación de los elementos, esta vez al final del eje vertical:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: end;
grid-template-columns: 100px 100px;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
}
:
Y ahora veamos cómo se ve nuestro grid a través del depurador:
Ver también
-
la propiedad
flex-direction,
que establece la dirección de los ejes de los bloques flex -
la propiedad
justify-content,
que establece la alineación a lo largo del eje principal -
la propiedad
align-items,
que establece la alineación a lo largo del eje transversal -
la propiedad
flex-wrap,
que establece la multilínea de los bloques flex -
la propiedad
flex-flow,
abreviatura paraflex-directionyflex-wrap -
la propiedad
order,
que establece el orden de los bloques flex -
la propiedad
align-self,
que establece la alineación de un bloque -
la propiedad
flex-basis,
que establece el tamaño de un bloque flex específico -
la propiedad
flex-grow,
que establece la avaricia de los bloques flex -
la propiedad
flex-shrink,
que establece la compresibilidad de los bloques flex -
la propiedad
flex,
abreviatura paraflex-grow,flex-shrinkyflex-basis
