¿Cómo funciona flex-wrap con Align-Self, Align-Items y Align-Content?

align-self

En el siguiente código, align-self funciona con flex-wrap: nowrap .

enter image description here

 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; } 
         

Pero cuando el contenedor se cambia a flex-wrap: wrap , la propiedad de align-self falla.

enter image description here

 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; } 
         


align-items

Del mismo modo, ¿por qué funciona la align-items aquí (ajuste desactivado):

enter image description here

 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; } 
         

… pero no aquí (wrap enabled):

enter image description here

 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; } 
         


align-content

Con flex-wrap: nowrap , la propiedad de align-content no centrará verticalmente los elementos flexibles aquí:

enter image description here

 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; } 
         

Pero, curiosamente, si wrap está habilitado y align-content se deja de lado, el contenedor crea amplias brechas entre las filas aquí:

enter image description here

 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; } 
         

Y align-self funciona de nuevo.

enter image description here

 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; } 
         

¿Cómo funciona flex-wrap con align-self , align-items y align-content?

Respuesta corta

Aunque la propiedad flex-wrap parece bastante básica, ya que controla si los elementos flexibles pueden envolver, en realidad tiene un amplio impacto en todo el diseño de la caja flexible.

La propiedad flex-wrap determina el tipo de contenedor flexible que usará.

  • flex-wrap: nowrap crea un contenedor de flexión de una sola línea
  • flex-wrap: wrap y wrap-reverse crean un contenedor flexible multilínea

Los align-items align-self propiedades de align-self funcionan tanto en contenedores de línea única como en líneas múltiples. Sin embargo, solo pueden tener un efecto cuando hay espacio libre en el eje transversal de la línea flexible.

La propiedad de align-content solo funciona en contenedores de varias líneas. Se ignora en contenedores de línea única.


Explicación

La especificación flexbox proporciona cuatro propiedades de palabras clave para alinear elementos flexibles:

  • align-items
  • align-self
  • align-content
  • justify-content

Para comprender las funciones de estas propiedades, es importante entender primero la estructura de un contenedor flexible.


Parte 1: comprender el eje principal y el eje cruzado de un contenedor flexible

Los ejes X e Y

Un contenedor flexible funciona en dos direcciones: eje x (horizontal) y eje y (vertical).

eje x y el eje y

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

La superposición de los ejes xey son, en diseño flexible, los ejes principal y transversal .

Por defecto, el eje principal es horizontal (eje x) y el eje transversal es vertical (eje y). Esa es la configuración inicial, tal como se define en la especificación flexbox .

flexar el eje principal y el eje transversal

Fuente: W3C

Sin embargo, a diferencia de los ejes xey, que son fijos, los ejes principal y transversal pueden cambiar de dirección.

La propiedad de flex-direction

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 instrucciones se pueden cambiar fácilmente con la propiedad de flex-direction . 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 propiedad de flex-direction

La propiedad de flex-direction especifica cómo se colocan los elementos flexibles en el contenedor flexible, al establecer la dirección del eje principal del contenedor flexible. Esto determina la dirección en la que se colocan los elementos flexibles.

Hay cuatro valores para la propiedad de flex-direction :

 /* 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 es siempre perpendicular al eje principal.


Parte 2: Flex Lines

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 Flex de línea única

flex-wrap: nowrap establece un contenedor flexible de una línea, en el que los artículos flexibles se mantienen en una sola línea (incluso si se desbordan del contenedor).

un contenedor flexible de una línea (una columna)

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; } 
        

En primer lugar, align-content es inútil si no hay wrap:

w3c doc

La propiedad de alineación de contenido 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 no tiene 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 se han empaquetado. Vamos a crear un espacio para que el estilo pueda funcionar:

 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 */ }