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:
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;:
Y así es como align-content: space-around;con las align-items:centermiradas:
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.
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?
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
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.
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:
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
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:
<divclass="flex-container"><divclass="item">Short</div><divclass="item">Longerrrrrrrrrrrrrr</div><divclass="item">💩</div><divclass="item"id="tall">This is Many Words</div><divclass="item">Lorem, ipsum.</div><divclass="item">10</div><divclass="item">Snickers</div><divclass="item">Wes Is Cool</div><divclass="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.
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.
Estos ejemplos se basan en flexbox, pero los mismos principios son aplicables a la cuadrícula CSS. Espero que esto ayude :)
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.
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?)
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).
Respuestas:
La
align-itemspropiedad de flex-box alinea los elementos dentro de un contenedor flexible a lo largo del eje transversal al igual que ajustify-contentlo largo del eje principal. (Por defecto,flex-direction: rowel eje transversal corresponde a vertical y el eje principal corresponde a horizontal. Conflex-direction: columnesos dos se intercambian respectivamente).Aquí hay un ejemplo de cómo se
align-items:centerve: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 paraalign-content: space-around;:Y así es como
align-content: space-around;con lasalign-items:centermiradas: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.
fuente
align-*propiedades también pueden desplazar elementos flexibles horizontalmente. Depende de laflex-direction. stackoverflow.com/q/32551291/3597276El 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ó:
fuente
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/
fuente
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:
min-height: 60rem) y, por lo tanto, puede ser demasiado alto para su contenidoLa 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 posicionamientoalign-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)
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.
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.Estos ejemplos se basan en flexbox, pero los mismos principios son aplicables a la cuadrícula CSS. Espero que esto ayude :)
fuente
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 paraspace-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), yalign-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 soloalign-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 elalign-contentvalor de estiramiento para expandir el área de líneas.fuente
alinear contenido
align-contentcontrola el posicionamiento del eje transversal (es decir, la dirección vertical siflex-directiones isrowy la horizontal siflex-directiones iscolumn) 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-itemscontrola 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?)
fuente
Lo que he aprendido de cada respuesta y visitando el blog es
flex-direction: rowflex-direction: columnalign-content es para la fila, funciona si el contenedor tiene (más de una fila) Propiedades de align-content
align-items es para los elementos en fila Propiedades de align-items
Para más visita de referencia a flex
fuente
¡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
fuente
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).
fuente