Solución:
Respuesta corta
Aunque el flex-wrap La propiedad parece bastante básica: controla si los elementos flexibles pueden ajustarse; en realidad, tiene un impacto amplio en todo el diseño de la caja flexible.
los flex-wrap La propiedad determina el tipo de contenedor flexible que utilizará.
flex-wrap: nowrapcrea un contenedor flexible de una líneaflex-wrap: wrapywrap-reversecrear un contenedor flexible multilínea
los align-items y align-self Las propiedades funcionan en contenedores de una o varias líneas. Sin embargo, solo pueden tener efecto cuando hay espacio libre en el eje transversal de la línea flexible.
los align-content La propiedad solo funciona en contenedores multilínea. Se ignora en contenedores de una sola línea.
Explicación
La especificación de flexbox proporciona cuatro propiedades de palabras clave para alinear elementos flexibles:
align-itemsalign-selfalign-contentjustify-content
Para comprender las funciones de estas propiedades, es importante comprender primero la estructura de un contenedor flexible.
Parte 1: Comprensión del eje principal y el eje transversal de un contenedor flexible
Los ejes X e Y
Un contenedor flexible funciona en dos direcciones: eje x (horizontal) y eje y (vertical).
Fuente: Wikipedia
Los elementos secundarios de un contenedor flexible, conocidos como “elementos flexibles”, se pueden alinear en cualquier dirección.
Esta es la alineación flexible en su nivel más fundamental.
Los ejes principal y transversal
Superponiendo los ejes xey están, en el diseño flexible, los principal y Cruz ejes.
De forma predeterminada, el eje principal es horizontal (eje x) y el eje transversal es vertical (eje y). Esa es la configuración inicial, según lo definido por la especificación de flexbox.
Fuente: W3C
Sin embargo, a diferencia de los ejes xey, que son fijos, los ejes principal y transversal pueden cambiar de dirección.
los flex-direction Propiedad
En la imagen de arriba, el eje principal es horizontal y el eje transversal es vertical. Como se mencionó anteriormente, esa es una configuración inicial de un contenedor flexible.
Sin embargo, estas direcciones se pueden cambiar fácilmente con el flex-direction propiedad. Esta propiedad controla la dirección del eje principal; determina si los elementos flexibles se alinean vertical u horizontalmente.
De la especificación:
5.1. Dirección de flujo flexible: la
flex-direction
propiedadlos
flex-directionLa propiedad especifica cómo se colocan los elementos flexibles en el contenedor flexible, estableciendo la dirección del eje principal del contenedor flexible. Esto determina la dirección en la que se colocan los artículos flexibles.
Hay cuatro valores para flex-direction propiedad:
/* main axis is horizontal, cross axis is vertical */
flex-direction: row; /* default */
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
El eje transversal siempre es perpendicular al eje principal.
Parte 2: Líneas flexibles
Dentro del contenedor, los artículos flexibles existen en una línea, conocida como “línea flexible”.
Una línea flexible es una fila o columna, dependiendo de flex-direction.
Un contenedor puede tener una o más líneas, dependiendo de flex-wrap.
Contenedor flexible de una línea
flex-wrap: nowrap establece un contenedor flexible de una sola línea, en el que los elementos flexibles se ven obligados a permanecer en una sola línea (incluso si desbordan el contenedor).
La imagen de arriba tiene una línea flexible.
flex-container
display: flex;
flex-direction: column;
flex-wrap: nowrap; /* <-- allows single-line flex container */
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
width: 50px;
margin: 5px;
background-color: lightgreen;
Contenedor flexible multilínea
flex-wrap: wrap o wrap-reverse establece un contenedor flexible de varias líneas, en el que los elementos flexibles pueden crear nuevas líneas.
La imagen de arriba tiene tres líneas flexibles.
flex-container
display: flex;
flex-direction: column;
flex-wrap: wrap; /* <-- allows multi-line flex container */
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
width: 50px;
margin: 5px;
background-color: lightgreen;
La imagen de arriba tiene tres líneas flexibles.
flex-container
display: flex;
flex-direction: row;
flex-wrap: wrap; /* <-- allows multi-line flex container */
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
Parte 3: Propiedades de alineación de palabras clave
Las propiedades se asignan a los ejes principal y transversal (no X e Y)
Mientras que la flex-direction La propiedad controla la dirección en la que se colocan los elementos flexibles, hay cuatro propiedades que controlan la alineación y el posicionamiento. Estos son:
align-itemsalign-selfalign-contentjustify-content
Cada una de estas propiedades está asignada permanentemente a un eje.
los justify-content La propiedad funciona solo en el eje principal.
El tres align-* Las propiedades funcionan solo en el eje transversal.
Es un error común asumir que estas propiedades están fijas en los ejes xey. Por ejemplo, justify-content es siempre horizontal, y align-items es siempre vertical.
Sin embargo cuando flex-direction se cambia a column, el eje principal se convierte en el eje y, y justify-content funciona verticalmente.
El enfoque de esta publicación es la alineación del eje transversal. Para obtener una explicación de la alineación del eje principal y justify-content propiedad, vea esta publicación:
- En CSS Flexbox, ¿por qué no hay propiedades "justify-items" y "justify-self"?
Definiciones
La especificación de flexbox proporciona tres propiedades de palabras clave para la alineación entre ejes:
align-itemsalign-selfalign-content
align-items / align-self
los align-items La propiedad alinea los elementos flexibles a lo largo del eje transversal de la línea flexible. Se aplica a contenedores flexibles.
los align-self la propiedad se usa para anular align-items en artículos flexibles individuales. Se aplica a los artículos flexibles.
Aquí está la definición de la especificación:
8.3. Alineación de ejes cruzados: el
align-itemsyalign-self
propiedadesLos elementos flexibles se pueden alinear en el eje transversal de la línea actual del contenedor flexible, similar a
justify-contentpero en la dirección perpendicular.align-itemsestablece la alineación predeterminada para todos los elementos del contenedor flexible.align-selfpermite anular esta alineación predeterminada para elementos flexibles individuales.
Hay seis valores posibles para align-items / align-self:
flex-startflex-endcenterbaselinestretchauto(align-selfsolamente)
(Para obtener una descripción de cada valor, haga clic en el encabezado de definición de especificación de arriba).
El valor inicial de align-items es stretch, lo que significa que los elementos flexibles ampliarán la longitud total disponible del eje transversal del contenedor.
El valor inicial de align-self es auto, lo que significa que hereda el valor de align-items.
A continuación se muestra una ilustración del efecto de cada valor en un contenedor de dirección de fila.
fuente: W3C
align-content
Esta propiedad es un poco más compleja que align-items y align-self.
Aquí está la definición de la especificación:
8.4. Embalaje de líneas flexibles: el
align-content
propiedadlos
align-contentLa propiedad alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, similar a cómojustify-contentalinea elementos individuales dentro del eje principal. Tenga en cuenta que esta propiedad no tiene ningún efecto en un contenedor flexible de una sola línea.
En contraste con align-items y align-self, que mueven elementos flexibles dentro de su línea, align-content mueve líneas flexibles dentro del contenedor.
Hay seis valores posibles para align-content:
flex-startflex-endcenterspace-betweenspace-aroundstretch
(Para obtener una descripción de cada valor, haga clic en el encabezado de definición de especificación de arriba).
A continuación se muestra una ilustración del efecto de cada valor en un contenedor de dirección de fila.
fuente: W3C
Por que align-content ¿Funciona solo en contenedores flexibles de varias líneas?
En un contenedor flexible de una sola línea, el tamaño transversal de la línea es igual al tamaño transversal del contenedor. Esto significa que no hay espacio libre entre la línea y el contenedor. Como resultado, align-content no puede tener ningún efecto.
Aquí está la sección relevante de la especificación:
Solo los contenedores flexibles de varias líneas tienen espacio libre en el eje transversal para alinear las líneas, porque en un contenedor flexible de una sola línea, la línea de la suela se estira automáticamente para llenar el espacio.
Parte 4: Ejemplos explicados
En el ejemplo n. ° 1, align-self funciona con flex-wrap: nowrap porque los elementos flexibles existen en un contenedor de una sola línea. Por lo tanto, hay una línea flexible y coincide con la altura del contenedor.
flex-container
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
flex-item:last-child
align-self: flex-end;
background-color: crimson;
En el ejemplo n. ° 2, align-self falla porque existe en un contenedor de varias líneas (flex-wrap: wrap) yalign-content se establece en flex-start. Esto significa que las líneas flexibles están empaquetadas firmemente al inicio del eje transversal, sin dejar espacio libre para align-self trabajar.
flex-container
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
flex-item:last-child
align-self: flex-end;
background-color: crimson;
La explicación del ejemplo n. ° 3 es la misma que la del ejemplo n. ° 1.
flex-container
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
La explicación del ejemplo 4 es la misma que la del ejemplo 2.
flex-container
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
El ejemplo n. ° 5 es un contenedor de una sola línea. Como tal, el tamaño cruzado de la línea flexible es igual al tamaño cruzado del contenedor, sin dejar espacio adicional entre los dos. Por lo tanto, align-content, que alinea las líneas flexibles cuando hay espacio extra en el eje transversal, no tiene ningún efecto.
flex-container
display: flex;
flex-wrap: nowrap;
align-content: center;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
El ajuste inicial para align-content es stretch. Esto significa que si no se especifica ningún otro valor, el contenedor distribuirá el espacio disponible de manera uniforme entre las líneas flexibles. (Se crea un efecto similar en el eje principal cuando todos los elementos flexibles se flex: 1.)
Esta distribución de espacio entre líneas puede causar grandes espacios entre filas / columnas. Menos líneas dan como resultado espacios más amplios. Más líneas dan como resultado espacios más pequeños, ya que cada línea recibe una parte más pequeña del espacio.
Para resolver este problema, cambie de align-content: stretch para align-content: flex-start. Esta empaqueta las líneas juntas (vea los ejemplos # 2 y # 4 arriba). Por supuesto, esto también elimina cualquier espacio libre en la línea, y align-items y align-self ya no puede funcionar.
Aquí hay una publicación relacionada: elimine el espacio (espacios) entre varias líneas de elementos flexibles cuando se envuelven
flex-container
display: flex;
flex-wrap: wrap;
/* align-content: center; */
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
Como se explicó en ejemplos anteriores, con align-content: stretch, puede haber espacio adicional en las líneas flexibles, lo que permite align-items y align-self trabajar. Cualquier otro valor para align-content empacaría las líneas, eliminando espacio extra y haciendo align-items y align-self inútil.
flex-container
display: flex;
flex-wrap: wrap;
/* align-content: center; */
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
flex-item:nth-child(even)
align-self: flex-end;
background-color: crimson;
En primer lugar, align-content es inútil si no hay un ajuste:
w3c doc
La propiedad align-content alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, similar a cómo justify-content alinea elementos individuales dentro del eje principal. Tenga en cuenta que esta propiedad tiene sin efecto en un contenedor flexible de una sola línea.
Además, en su segundo caso, align-self no está fallando. Es inútil porque las líneas internas están empaquetadas. Creemos un espacio para que el estilo funcione:
flex-container
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
flex-item:last-child
align-self: flex-end;
background-color: crimson;
flex-item:nth-child(5)
height: 90px; /* added */
De manera similar, en su cuarto ejemplo, el estilo está funcionando, si establece las condiciones donde se puede ver
flex-container
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
flex-item
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
flex-item:nth-child(2),flex-item:nth-child(5)
height: 90px; /* added */
Finalmente, cuando comenta el contenido de alineación, vuelve a estirarse, por eso las líneas aumentan de tamaño para llenar el contenedor
estirar Las líneas se estiran para ocupar el espacio restante. Si el espacio libre sobrante es negativo, este valor es idéntico a flex-start. De lo contrario, el espacio libre se divide equitativamente entre todas las líneas, aumentando su tamaño de cruz.
Aquí tienes las comentarios y valoraciones
Si haces scroll puedes encontrar las interpretaciones de otros sys admins, tú incluso eres capaz mostrar el tuyo si te apetece.