2

Podrían explicarme la diferencia entre align-items y align-content

3 respuestas 3

2

@Antonio, align-items alinea los elementos hijos de una misma fila entre sí mientras que align-content lo hace respecto del padre.

Fíjate que digo que alinea los elementos hijos, es decir que lo aplicas al padre.

Si usamos align-content el alineado sólo se producirá si los elementos ocupan más de una fila. Es decir que p.e. align-content: center no tendrá efecto a menos que el contenido tenga mínimo 2 filas.

Si sólo usamos align-items y tenemos más de una fila el conjunto de filas no se centrará respecto del contenido sino que se repartirá entre el espacio disponible. Pero sí se centrarán los elementos de distinto tamaño.

Por esa razón es recomendable usar ambos, de forma que si sólo ocupa una línea, sea align-items el que se encargue y si hay múltiples, se encargue align-content.

Espero haber aclarado tus dudas.

Te he hecho un pequeño pen para que puedas trastear.

2
  • Por favor revisa quien hace la pregunta, no fui yo.
    – Shaz
    el 4 feb. 2019 a las 12:59
  • Upps!! Tienes razón, sorry. Cambiado. Gracias @Shaz el 5 feb. 2019 a las 14:47
1

align-items

Sirve para poder alinear los elementos del otro eje, es decir, digamos que tienes lo siguiente: flex-direction: row, como puedes ver el eje principal es "row", cuando uses align-items estarias acomodando los elementos para el "column" y NO para el row, tómalo como si fuera un "justify-content" pero para el otro eje.

align-content

Es lo mismo que "align-items", la unica diferencia es que "align-content" se usa cuando hay 2 o más linea de elementos flexibles y "align-items" cuando hay una sola linea de elementos flexibles.

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Para más información puedes visitar este sitio web: introducir la descripción del enlace aquí

4
  • 1
    Tienes imagenes repetidas, solo deja las imagenes que tienen la explicacion. Yo edite tu pregunta pero Shaz, rechazo la edicion. el 21 ene. 2019 a las 18:10
  • 1
    @OrlandoDeLaRosa la rechacé porque no son imágenes repetidas como tal, hay diferencias entre ellas, por lo cual prefiero que sea el mismo autor quien decida si hay un motivo para dejarlas o no.
    – Shaz
    el 21 ene. 2019 a las 18:26
  • 1
    Exacto no son las misma imagenes, pero visualmente siguen siendo la misma, solo que le agrego texto y unas flechas. En cuanto al punto de vista de que el autor sea quien decida estoy de acuerdo, solo que en ese momento pense que agrego las imagenes y se le olvido quitar las otras. Bueno esperemos al autor, y me disculpo por el prejuicio que hice. Saludos. el 21 ene. 2019 a las 18:33
  • Hice esto con el fin de que @Antonio_U. entendiera lo que le trato de explicar, es cierto de que no era necesario volver a poner esas imagenes, pero como vuelvo a recalcar, lo hice solo por ser más específico y no generar confusión a Antonio_U. :) el 21 ene. 2019 a las 19:09
0

align-items

Permite definir como se acomodan los elementos en el eje perpendicular al eje principal. En otras palabras: si definimos que el eje principal sea en filas (row), entonces align-items actuará en las columnas.

Si usamos por ejemplo el valor flex-end en esta propiedad y el eje principal está definido en filas, los elementos se alinearán «verticalmente» en la parte baja del contenedor.

introducir la descripción de la imagen aquí


align-content

Permite definir como se acomodan las líneas de elementos en el eje perpendicular. Esta propiedad solo aplica cuando hay más de una línea de elementos , si hay solo una línea de elementos, no hace nada.

Si usamos de nuevo flex-end y tenemos más de una línea de elementos, lo que hará es poner dichas líneas lo más abajo posible en el contenedor.

introducir la descripción de la imagen aquí


¿Cuál es la diferencia entonces?

align-items es para una sola «línea» y es aplicado a cada elemento, mientras align-content aplica para las líneas (no exactamente a los elementos) cuando hay más de una.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.