¿Cuál es la diferencia entre alinear contenido y alinear elementos?
¿ Cuál es la diferencia entre align-itemsy align-content?
La align-itemspropiedad de flex-box alinea los elementos dentro de un contenedor flexible a lo largo del eje transversal tal como justify-contentlo hace a lo largo del eje principal. (Por defecto, flex-direction: rowel eje transversal corresponde al vertical y el eje principal corresponde al horizontal. Estos flex-direction: columndos se intercambian respectivamente).
Aquí hay un ejemplo de cómo align-items:centerse ve:
Pero align-contentes para cajas flexibles de varias líneas. No tiene ningún efecto cuando los elementos 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 así es como ocurre align-content: space-around;con align-items:centerla apariencia:
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í tienes un bolígrafo genial que muestra y te permite jugar con casi todo en Flexbox.
Del ejemplo en flexboxfroggy.com :
Te llevará entre 10 y 20 minutos y en el nivel 21 encontrarás la respuesta a tu pregunta.
align-content determina el espacio entre líneas
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 ningún efecto
Primero, align-itemses para elementos en una sola fila. Entonces, para una sola fila de elementos en el eje principal , align-itemsse alinearán estos elementos entre sí y se comenzará con una nueva perspectiva desde la siguiente fila.
Ahora, align-contentno interfiere con los elementos de una fila sino con las filas mismas . Por lo tanto, align-contentintentaremos alinear las filas entre sí y flexionar el contenedor.
Mira este violín: https://jsfiddle.net/htym5zkn/8/
