¿Cuál es la diferencia entre align-content y align-items?

¿Alguien puede mostrarme la diferencia entre align-items y align-content ?

La propiedad de align-items de flex-box alinea los elementos dentro de un contenedor flexible a lo largo del eje transversal al igual que justify-content hace a lo largo del eje principal. (Para la flex-direction: row predeterminada flex-direction: row el eje transversal corresponde a la vertical y el eje principal corresponde a la horizontal. Con flex-direction: column se intercambian respectivamente).

Aquí hay un ejemplo de cómo align-items:center ve:

alinear elementos: centro

Pero align-content es para cajas flexibles de varias líneas. No tiene ningún efecto cuando los artículos están en una sola línea. Alinea toda la estructura de acuerdo a su valor. Aquí hay un ejemplo para align-content: space-around; : enter image description here

Y aquí está cómo align-content: space-around; con elementos de align-items:center apariencia align-items:center : enter image description here

Tenga en cuenta que la tercera casilla y todas las demás casillas en la primera línea cambian a centradas verticalmente en esa línea.

Aquí hay algunos enlaces de codepen para jugar:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Aquí hay una pluma súper genial que muestra y te permite jugar con casi todo en flexbox.

Primero, align-items es para artículos en una sola fila. Por lo tanto, para una sola fila de elementos en el eje principal , align-items alineación alinearán estos elementos respectivos y comenzará con una nueva perspectiva de la siguiente fila.

Ahora, align-content no interfiere con los elementos en una fila, sino con las filas . Por lo tanto, align-content intentará alinear filas con respecto a cada una y flex contenedor.

Mira este violín: https://jsfiddle.net/htym5zkn/8/

Encuentro el ejemplo http://flexboxfroggy.com/ muy útil.

Te llevará de 10 a 20 minutos y en el nivel 21 encontrarás la respuesta a tu pregunta. Mencionó:

align-content determina el espaciado entre líneas, mientras que align-items determina cómo se alinean los elementos como un todo dentro del contenedor. Cuando solo hay una línea, el contenido de alineación no tiene efecto

Bueno, los he examinado en mi navegador.

align-content puede cambiar la altura de una línea para la dirección o el ancho de la columna cuando su valor es elástico, o agregar espacio vacío entre las líneas para los flex-end values de space-between , space-around , flex-start flex-end values .

align-items pueden cambiar la altura o la posición de los elementos dentro del área de la línea. Cuando los artículos no se envuelven, tienen solo una línea cuya área siempre se extiende al área de caja flexible (incluso si los artículos se desbordan) y align-content no tiene efecto en una sola línea. Por lo tanto, no tiene ningún efecto en los elementos que no están envueltos y solo align-items pueden cambiar la posición de los elementos o estirarlos cuando todos están en una sola línea.

Sin embargo, si están envueltos, tienes varias líneas y elementos dentro de cada línea. Y si todos los elementos de cada línea tienen la misma altura (para la dirección de la fila), la altura de esa línea será igual a la altura de los elementos y no verá ningún efecto cambiando el valor de align-items .

Por lo tanto, si desea afectar elementos align-items cuando sus artículos están envueltos y tienen la misma altura (para la dirección de la fila) primero, debe usar align-content con valor de estiramiento para expandir el área de líneas.

alinear-contenido

align-content controla el eje transversal (es decir, la dirección vertical si la dirección de flex-direction es en row , y horizontal si la flex-direction es en column ) posicionamiento de múltiples líneas una respecto de la otra.

(Piense que las líneas de un párrafo están verticalmente extendidas, astackdas hacia la parte superior, astackdas hacia abajo, bajo un paradigma de fila de flex-direction ).

alinear elementos

align-items controla el eje transversal de una línea individual de elementos Flex.

(Piensa cómo se alinea una línea individual de un párrafo, si contiene texto normal y texto más alto como ecuaciones matemáticas. En ese caso, será la parte inferior, superior o central de cada tipo de texto en una línea que estar alineado?)

de acuerdo con lo que entendí de aquí :

cuando utiliza alinear elemento o justificar elemento, está ajustando “el contenido dentro de un elemento de la cuadrícula a lo largo del eje de la columna o el eje de la fila, respectivamente.

Pero: si usa align-content o justify-content, está configurando la posición como una grilla a lo largo del eje de la columna o el eje de la fila. ocurre cuando tienes una grilla en un contenedor más grande y el ancho o alto son inflexibles (usando px).

La principal diferencia es cuando la altura de los elementos no es la misma. Entonces puede ver cómo en la fila, todos son centro \ end \ start