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

Respuestas:

384

La align-itemspropiedad de flex-box alinea los elementos dentro de un contenedor flexible a lo largo del eje transversal al igual que a justify-contentlo largo del eje principal. (Por defecto, flex-direction: rowel eje transversal corresponde a vertical y el eje principal corresponde a horizontal. Con flex-direction: columnesos dos se intercambian respectivamente).

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

alinear elementos: centro

Pero align-contentes para cajas flexibles multilínea. No tiene efecto cuando los artículos están en una sola línea. Alinea toda la estructura de acuerdo con su valor. Aquí hay un ejemplo para align-content: space-around;: ingrese la descripción de la imagen aquí

Y así es como align-content: space-around;con las align-items:centermiradas:ingrese la descripción de la imagen aquí

Tenga en cuenta que el tercer cuadro y todos los demás cuadros en la primera línea cambian a centrados 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 un bolígrafo súper genial que muestra y te permite jugar con casi todo en flexbox.

Asim KT
fuente
3
Tenga en cuenta que las align-*propiedades también pueden desplazar elementos flexibles horizontalmente. Depende de la flex-direction. stackoverflow.com/q/32551291/3597276
Michael Benjamin
1
Esta es fácilmente la mejor explicación. Todos los demás fallan miserablemente.
ortonomía
> "Pero el contenido de alineación es para cajas flexibles de varias líneas. No tiene ningún efecto cuando los elementos están en una sola línea". Esto parece no ser cierto o no ser respetado en el último Firefox (mayo de 2020). En cambio, si hay una sola línea flexible (todo el contenido se ajusta a menos de la longitud del eje principal) que es menor que la altura total (el tamaño del eje transversal es menor que el total disponible), entonces el contenido de alineación, si se establece, borrará la alineación. artículos. Esto tiene sentido: ¿se aplica a CUALQUIER línea que encuentra?
Adam
85

El ejemplo http://flexboxfroggy.com/ me parece muy útil.

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

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

Alireza Fattahi
fuente
2
De hecho, encontré el ejemplo de la rana realmente útil. Aprendí mucho de eso.
Spikatrix
63

Primero, align-itemses para artículos en una sola fila. Entonces, para una sola fila de elementos en el eje principal , align-itemsalineará estos elementos entre sí y comenzará con una nueva perspectiva desde la siguiente fila.

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

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

Uday Hiwarale
fuente
19

Tuve la misma confusión. Después de algunos ajustes basados ​​en muchas de las respuestas anteriores, finalmente puedo ver las diferencias. En mi humilde opinión, la distinción se demuestra mejor con un contenedor flexible que cumple las dos condiciones siguientes:

  1. El contenedor flexible en sí tiene una restricción de altura (por ejemplo, min-height: 60rem) y, por lo tanto, puede ser demasiado alto para su contenido
  2. Los artículos secundarios encerrados en el contenedor tienen alturas desiguales

La condición 1 me ayuda a entender lo que contentsignifica en relación con su contenedor principal. Cuando el contenido esté alineado con el contenedor, no podremos ver ningún efecto de posicionamiento align-content. Solo cuando tenemos espacio adicional a lo largo del eje transversal, comenzamos a ver su efecto: alinea el contenido en relación con los límites del contenedor principal.

La condición 2 me ayuda a visualizar los efectos de align-items: alinea los elementos entre sí.


Aquí hay un ejemplo de código. Las materias primas provienen del tutorial de CSS Grid de Wes Bos (21. Flexbox vs. CSS Grid)

  • HTML de ejemplo:
  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>
  • CSS de ejemplo:
.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Ejemplo 1 : reduzcamos la ventana gráfica para que el contenido esté alineado con el contenedor. Esto es cuando align-content: flex-start;no tiene efectos, ya que todo el bloque de contenido se ajusta perfectamente dentro del contenedor (¡no hay espacio adicional para el reposicionamiento!)

Además, tenga en cuenta la segunda fila: vea cómo los elementos están alineados en el centro entre ellos.

ingrese la descripción de la imagen aquí

Ejemplo 2 : a medida que ampliamos la ventana gráfica, ya no tenemos suficiente contenido para llenar todo el contenedor. Ahora comenzamos a ver los efectos de align-content: flex-start;- alinea el contenido en relación con el borde superior del contenedor. ingrese la descripción de la imagen aquí


Estos ejemplos se basan en flexbox, pero los mismos principios son aplicables a la cuadrícula CSS. Espero que esto ayude :)

Shan Dou
fuente
11

Bueno, los he examinado en mi navegador.

align-contentpuede cambiar la altura de una línea de dirección de la fila o el ancho de la columna cuando su valor es de estiramiento, o añadir espacio vacío entre o alrededor de las líneas para space-between, space-around, flex-start, flex-end values.

align-itemspuede cambiar la altura o posición de los artículos dentro del área de la línea. Cuando los artículos no están envueltos, tienen solo una línea, su área siempre se estira al área de la caja flexible (incluso si los artículos se desbordan), y align-contentno 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-itemspuede cambiar la posición de los elementos o estirarlos cuando todos están en una sola línea.

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

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

Lo negativo
fuente
7

alinear contenido

align-contentcontrola el posicionamiento del eje transversal (es decir, la dirección vertical si flex-directiones is rowy la horizontal si flex-directiones is column) de varias líneas entre sí.

(Piense que las líneas de un párrafo se extienden verticalmente, se apilan hacia arriba, se apilan hacia abajo. Esto está bajo un flex-directionparadigma de fila).

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 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?)

ahnbizcad
fuente
1

Lo que he aprendido de cada respuesta y visitando el blog es

¿Cuál es el eje transversal y el eje principal?

  • el eje principal es una fila horizontal y el eje transversal es una columna vertical, para flex-direction: row
  • el eje principal es una columna vertical y el eje transversal es una fila horizontal, para flex-direction: column

Ahora align-content y align-items

align-content es para la fila, funciona si el contenedor tiene (más de una fila) Propiedades de align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items es para los elementos en fila Propiedades de align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Para más visita de referencia a flex

bajran
fuente
0

¡La principal diferencia es cuando la altura de los elementos no es la misma! Luego puede ver cómo en la fila, todos están centrados \ fin \ inicio

simi
fuente
0

de acuerdo a lo que entendí desde aquí :

cuando usa align-item o justify-item, está ajustando "el contenido dentro de un elemento de cuadrícula a lo largo del eje de columna o eje de fila respectivamente.

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

Goldenmoon
fuente