¿Cuál es la diferencia entre align-content y align-items?
Respuestas:
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.
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.
align-*propiedades también pueden desplazar elementos flexibles horizontalmente. Depende de la flex-direction. stackoverflow.com/q/32551291/3597276
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
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/
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:
<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.
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 :)
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.
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?)
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
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).