Todo lo que necesitas saber sobre la alineación en Flexbox

Sobre el autor : Rachel Andrew no solo es la editora en jefe de Smashing Magazine, sino también una desarrolladora web, escritora y oradora. Es autora de varios libros, incluido The New CSS Layout , uno de los desarrolladores del sistema de gestión de contenido Perch . Escribe sobre negocios y tecnología en su sitio web rachelandrew.co.uk .

Resumen: en este artículo analizaremos las propiedades de alineación en Flexbox y algunas reglas básicas sobre cómo funciona la alineación en los ejes principal y transversal.

En el primer artículo de esta serie, hablé sobre lo que sucede cuando una propiedad display: flex se declara para un elemento. Ahora veamos las propiedades de alineación y cómo funcionan con Flexbox. Si alguna vez ha estado confundido, aplique align o justify , ¡espero que este artículo aclare mucho!

Historial de alineación de Flexbox

En la historia de CSS, la alineación correcta en ambos ejes parecía ser el mayor desafío. La aparición de esta función en Flexbox para muchos se ha convertido en la principal ventaja de esta tecnología. La alineación se redujo a dos líneas de CSS .

Las propiedades de alineación ahora están completamente definidas en la especificación de Alineación de caja . Detalla cómo funciona la alineación en varios diseños. Esto significa que en CSS Grid puede usar las mismas propiedades que en Flexbox, y en el futuro también en otros diseños. Por lo tanto, cualquier nueva característica de alineación de Flexbox se describirá en detalle en la especificación de Alineación de caja, y no en la próxima versión de Flexbox.

Las propiedades

Es difícil para muchos recordar si usar propiedades que comienzan con justify- o justify- . Es importante recordar lo siguiente:

• justify- realiza la alineación en el eje principal en la misma dirección que la dirección flex-direction ;
• alinear: realiza la align- eje a través de la flex-direction .

Realmente ayuda a pensar en términos de los ejes principal y transversal, y no horizontal y vertical. No importa cómo se dirige físicamente el eje.

Alineación del eje principal con justify-content

Comencemos con la alineación en el eje principal. Se implementa utilizando la propiedad justify-content . Esta propiedad trata todos los elementos como un grupo y controla la distribución del espacio entre ellos.

El valor inicial de justify-content es flex-start . Es por eso que al declarar display: flex todos los elementos flex se alinean al comienzo de la línea. Al escribir, de izquierda a derecha, los elementos se agrupan de izquierda a derecha.


Tenga en cuenta que la propiedad justify-content produce un efecto visible solo cuando hay espacio libre . Por lo tanto, si su conjunto de elementos ocupa todo el espacio en el eje principal, justify-content no hará nada.


Si justify-content en flex-end , entonces todos los elementos se moverán al final de la línea. El espacio libre es ahora al principio.


Hay otras cosas que puedes hacer con este espacio. Por ejemplo, distribúyalo entre nuestros elementos usando justify-content: space-between . En este caso, el primer y el último elemento se colocarán en los extremos del contenedor, y todo el espacio se dividirá por igual entre los elementos.


Podemos asignar espacio usando justify-content: space-around . En este caso, el espacio disponible se divide en partes iguales y se coloca a cada lado del elemento.


El nuevo valor de justify-content se puede encontrar en la especificación de Alineación de caja; no se especifica en la especificación de Flexbox. Este valor es el space-evenly . En este caso, los elementos se distribuyen uniformemente en el contenedor, y el espacio adicional se distribuye uniformemente entre los elementos y en ambos lados.



Puedes jugar con todos los valores en la demostración .

Los valores funcionan exactamente de la misma manera vertical, es decir, si flex-direction se aplica a la column . Es cierto que es posible que no tenga espacio libre en la columna para distribución si no agrega la altura o el tamaño de bloque del contenedor, como en esta demostración .

Alineación axial con align-content

Si el contenedor tiene varios ejes y flex-wrap: wrap especifica flex-wrap: wrap , entonces puede usar align-content para alinear las líneas en el eje transversal. Pero se requiere espacio adicional. En esta demostración, el eje transversal funciona en la dirección de la columna, e indiqué que la altura del contenedor es de 60vh . Como esto es más que necesario para mostrar todos los elementos, aparece el espacio libre vertical.

Entonces puedo aplicar align-content con cualquiera de los valores .

Si la column especifica como flex-direction , entonces align-content funciona como en el siguiente ejemplo .

Al igual que con justify-content , trabajamos con un grupo de cadenas y asignamos espacio libre.

Propiedad por place-content

En la especificación de Alineación de cuadro, puede encontrar la propiedad de place-content . El uso de esta propiedad significa que está configurando justify-content y align-content al mismo tiempo. El primer valor es para align-content , el segundo para justify-content . Si solo se especifica un valor, se aplica a ambas propiedades:

 .container { place-content: space-between stretch; } 

Corresponde a esto:

 .container { align-content: space-between; justify-content: stretch; } 

Y tal código:

 .container { place-content: space-between; } 

Equivalente a lo siguiente:

 .container { align-content: space-between; justify-content: space-between; } 

Alineación axial con elementos de align-items

Ahora sabemos que puede alinear un conjunto de elementos o filas como un grupo. Sin embargo, hay otra forma de alinear los elementos entre sí en el eje transversal. El contenedor tiene una altura, que está determinada por la altura del elemento más alto.


Alternativamente, se puede definir por la propiedad de height en el contenedor:


Por qué los elementos se estiran al tamaño del elemento más alto: esto se debe a que el valor inicial para el parámetro de align-items es stretch . Los elementos se estiran a lo largo del eje transversal hasta el tamaño del contenedor en esta dirección.

Tenga en cuenta que en un contenedor de varias líneas, cada línea actúa como un nuevo contenedor. El elemento más alto en esta fila determinará el tamaño de todos los elementos en esta fila.

Además del valor de stretch inicial, puede establecer elementos de align-items para flex-start , en cuyo caso están alineados al comienzo del contenedor y ya no están estirados en altura.


El valor del flex-end mueve al final del contenedor a lo largo del eje transversal.


Si utiliza el valor center , los elementos se centran entre sí:


También podemos alinearlos con la línea base. Esto garantiza que el texto esté alineado sobre una base, en contraste con la alineación de los campos alrededor del texto.


Todas estas opciones se pueden probar en la demostración .

Alineación individual con align-self

La propiedad align-items establece la alineación de todos los elementos al mismo tiempo. De hecho, establece valores de autoalineación para todos los elementos del grupo. También puede usar la propiedad align-self para cualquier elemento individual para alinearlo dentro de la cadena y con respecto a otros elementos.

El siguiente ejemplo utiliza elementos de align-items en el contenedor para centrar todo el grupo, pero también se align-self para el primer y último elemento.

¿Por qué no justify-self ?

A menudo surge la pregunta de por qué es imposible alinear un elemento o grupo de elementos a lo largo del eje principal. ¿Por qué no hay una propiedad propia en -self para la alineación en el eje principal? Si introduce justify-content y align-content como una forma de asignar espacio, la respuesta se vuelve más obvia. Tratamos los elementos como un grupo y colocamos el espacio libre de una determinada manera: ya sea al principio o al final del grupo, o entre elementos.

También puede ser útil pensar cómo funcionan justify-content y align-content en CSS Grid Layout. En la cuadrícula, estas propiedades se utilizan para distribuir espacio libre en un contenedor de cuadrícula entre pistas de cuadrícula . Aquí también tomamos un grupo de pistas, y con la ayuda de estas propiedades distribuimos espacio libre entre ellas. Como operamos en un grupo en Grid y Flexbox, no podemos tomar un elemento separado y hacer algo más con él. Sin embargo, hay una manera de obtener el diseño de diseño que los codificadores desean cuando hablan de la propiedad self en el eje principal. Este es el uso de campos automáticos.

Usando campos automáticos en el eje principal

Si alguna vez centró un bloque en CSS (por ejemplo, ajustando el contenido de la página principal, configurando los campos a la izquierda y a la derecha en auto ), entonces ya tiene algo de experiencia con los campos automáticos. El valor auto para los campos llena el espacio máximo en la dirección establecida. Para centrar el bloque, configuramos los campos izquierdo y derecho en auto : cada uno de ellos intenta ocupar la mayor cantidad de espacio posible y, por lo tanto, coloca nuestro bloque en el centro.

Los campos automáticos funcionan muy bien en Flexbox para alinear elementos individuales o grupos de elementos en el eje principal. El siguiente ejemplo muestra un caso típico. Hay una barra de navegación, los elementos se muestran como una cadena y usan el valor inicial justify-content: start . Quiero que el último elemento se muestre por separado de los demás al final de la línea, siempre que la línea tenga suficiente espacio para esto.

Tomamos este elemento y establecemos la propiedad margin-left en auto . Esto significa que el campo está tratando de obtener la mayor cantidad de espacio posible a la izquierda del elemento, es decir, el elemento se empuja hacia el borde derecho.



Si usa campos automáticos en el eje principal, justify-content dejará de funcionar, ya que los campos automáticos ocuparán todo el espacio que de otro modo se asignaría usando justify-content .

Alineación de repuesto

Para cada método de alineación, se describe un retroceso: qué sucede si la alineación dada no es posible. Por ejemplo, si solo tiene un elemento en el contenedor y especifica justify-content: space-between , ¿qué debería suceder? En este caso, se aplica una alineación de flex-start adicional: un elemento se alineará al comienzo del contenedor. En el caso de justify-content: space-around , se usa una alineación de center libre.

En la especificación actual, no puede cambiar la alineación de repuesto. Hay una nota en las especificaciones , que permite la posibilidad de especificar una reserva arbitraria en futuras versiones.

Alineación segura e insegura

Una adición reciente a la especificación de Alineación de caja es el concepto de alineación segura e insegura utilizando las palabras clave seguras e inseguras .

En el siguiente código, el último elemento es demasiado ancho para el contenedor, y con una alineación insegura y un contenedor flexible en el lado izquierdo de la página, el elemento se corta porque el desbordamiento va más allá de los bordes de la página.

 .container { display: flex; flex-direction: column; width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; } 

La alineación segura evita la pérdida de datos al mover el desbordamiento al otro lado.

 .container { display: flex; flex-direction: column; width: 100px; align-items: safe center; } .item:last-child { width: 200px; } 

Estas palabras clave aún no son compatibles con todos los navegadores, pero demuestran cómo las especificaciones de Box Alignment agregan control a Flexbox.

Conclusión

Las propiedades de alineación comenzaron con una lista en Flexbox, pero ahora tienen sus propias especificaciones y se aplican a otros contextos de diseño. Aquí hay algunos datos clave para ayudar a recordar su uso en Flexbox:

• justify- para los ejes principales y align- para el transversal;
• align-content y justify-content requieren espacio libre;
• Las propiedades de align-content y justify-content se aplican a los elementos del grupo, distribuyendo el espacio entre ellos. No puede especificar la alineación de un elemento individual porque falta la propiedad -self ;
• si desea alinear un elemento o dividir un grupo a lo largo del eje principal, use campos automáticos;
• align-items establece las mismas propiedades de align-self para todo el grupo. Use align-self para el hijo del grupo para establecer su valor individualmente.