css - texto - como centrar un titulo en html

¿Cuál es la diferencia entre alinear contenido y alinear elementos?

Question

¿Puede alguien mostrarme la diferencia entre align-items y align-content ?

Answer 1

¡La principal diferencia es cuando la altura de los elementos no es la misma! Luego puedes ver cómo en la fila, todos ellos son center / end / start

Answer 2

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

Le llevará entre 10 y 20 minutos y en el nivel 21 encontrará la respuesta a su pregunta. Mencionó:

align-content determina el espaciado entre líneas, mientras align-items determina cómo se alinean los elementos en su conjunto dentro del contenedor. Cuando solo hay una línea, align-content no tiene efecto

Answer 3

La propiedad align-items de flex-box alinea los elementos dentro de un contenedor flexible a lo largo del eje transversal al igual que justify-content 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 las dos respectivamente).

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

Pero align-content es para cajas flexibles multilínea. No tiene efecto cuando los artículos están en una sola línea. Alinea toda la estructura según su valor. Aquí hay un ejemplo para align-content: space-around; :

Y aquí está cómo align-content: space-around; con align-items:center miradas align-items:center :

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

Aquí hay algunos enlaces de codepen para jugar con:

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

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

Here''s una pluma súper genial que te muestra y te permite jugar con casi todo en flexbox.

Answer 4

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 entre sí y comenzarán con una nueva perspectiva desde la siguiente fila.

Ahora, align-content no interfiere con los elementos en una fila sino con las filas en sí . Por lo tanto, align-content intentará alinear filas entre sí y flexionar el contenedor.

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

Answer 5

Pues los he examinado en mi navegador.

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

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

Sin embargo, si están ajustados, tiene 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 la línea será igual a la altura de esos elementos y no verá ningún efecto al cambiar el valor de align-items .

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

Answer 6

Según lo que entendí de here :

cuando utiliza el elemento de alineación o el elemento de justificación, está ajustando "el contenido dentro de un elemento de cuadrícula a lo largo del eje de columna o fila respectivamente.

Pero: si usa alinear contenido o justificar contenido, está configurando la posición de una cuadrícula a lo largo del eje de columna o el eje de fila. ocurre cuando tienes una cuadrícula en un contenedor más grande y el ancho o la altura son inflexibles (utilizando px).

Answer 7

alinear contenido

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

(Piense en las líneas de un párrafo que se extienden verticalmente, se apilan hacia la parte superior, se apilan hacia la parte inferior. Esto es bajo un paradigma de fila de flex-direction ).

alinear elementos

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

(Piense cómo se alinea una línea individual de un párrafo, si contiene un texto normal y un 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?)