- Teoría
- Teoría
La propiedad align-items en flexbox
Ya colocamos las tarjetas en una fila y las separamos. Ahora hay que centrarlas verticalmente.
De manera predeterminada, los elementos flex se estiran hasta alcanzar la altura del elemento más alto de la línea. En nuestro caso, es la segunda tarjeta.
Para que la primera y la tercera tarjeta dejen de estirarse y queden centradas, usaremos align-items. Ya conocimos esta propiedad al trabajar con grid. En flexbox controla la posición de los elementos en el eje transversal.
El eje transversal es perpendicular al eje principal y, de manera predeterminada, va de arriba hacia abajo:
En un contenedor flex, align-items puede tomar estos valores:
stretch: los elementos se estiran a lo largo del eje transversal.flex-start: los elementos se ajustan al contenido y se colocan al inicio del eje transversal (arriba, de manera predeterminada).flex-end: los elementos se ajustan al contenido y se colocan al final del eje transversal (abajo, de manera predeterminada).center: los elementos se ajustan al contenido y se centran en el eje transversal.
.flex-container {
display: flex;
align-items: flex-start;
}Probemos distintos valores de align-items y después centremos las tarjetas verticalmente.
La propiedad align-items afecta a todos los elementos del contenedor flex. Sin embargo, la tarjeta central tiene la misma altura que el contenedor, así que los cambios de alineación no se notarán en ella.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Agrega
align-itemscon el valorflex-starta la regla decards-list. La primera y la tercera tarjeta dejarán de estirarse a toda la altura del contenedor. - Cambia el valor de
align-itemsaflex-end. Las tarjetas quedarán abajo. - Ahora cámbialo a
center. Las tarjetas quedarán centradas.