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

Una serie de publicaciones sobre las características de la tecnología Flexbox CSS de Rachel Andrew.

1. Qué sucede al crear un contenedor Flexbox .

En este artículo, observamos las propiedades de alineación en Flexbox, así como las reglas básicas que lo ayudan a recordar cómo funciona la alineación tanto en el eje principal como en el transversal.

En el primer artículo de esta serie, expliqué lo que sucede cuando display: flex se declara para un elemento. Esta vez veremos las propiedades de alineación y cómo funcionan con Flexbox . Si alguna vez te has confundido sobre cuándo realizar la alineación y cuándo justificar , ¡espero que este artículo aclare todas las preguntas!

Historia de la alineación de Flexbox

En toda la historia del diseño CSS, la capacidad de alinear correctamente los elementos en ambos ejes me pareció realmente el problema de diseño web más difícil. Es decir La capacidad de alinear elementos y grupos de elementos correctamente fue para muchos de nosotros la característica más emocionante de Flexbox cuando apareció por primera vez en los navegadores. La alineación se convirtió en solo dos líneas en CSS:

Las propiedades de alineación, que pueden considerarse propiedades de alineación de flexbox , ahora están completamente definidas en la especificación de Alineación de caja . Detalla cómo funciona la alineación en diferentes contextos de diseño. Esto significa que podemos usar las mismas propiedades de alineación en CSS Grid que en Flexbox , y en el futuro, y en otros contextos de diseño. Por lo tanto, cualquier nueva opción de alineación para flexbox se describirá en detalle en la especificación de Alineación de cajas , y no en el siguiente nivel de Flexbox .

Las propiedades

Muchas personas me dicen que luchan por recordar si usar propiedades que comienzan en flexbox con align- , o aquellas que comienzan con justify- . Debe recordarse que:

• justify alinea el eje principal. Alineación en la misma dirección que su dirección flexible;
• alinear alinea el eje perpendicular. Alineación en la dirección perpendicular a la dirección de flexión.

Pensar desde el punto de vista del eje principal y transversal, en lugar de horizontal y vertical, realmente ayuda aquí. No importa dónde se dirige físicamente el eje.

Alinear el eje principal con justify-content

Comencemos alineando el eje principal. La alineación en el eje principal se realiza utilizando la propiedad justify-content . Esta propiedad trata todos los elementos flexibles como un grupo y controla la distribución de espacio entre ellos.

El valor inicial de la propiedad justify-content es flex-start . Es por eso que al declarar la display: flex todos los elementos flexibles se alinean al comienzo de la línea flexible. Si su dirección flexible tiene la fila de valor (línea) y la dirección de ingresar el texto del idioma de izquierda a derecha, como el inglés, entonces los elementos comenzarán desde la izquierda.

Fig_1. Los elementos se alinean desde el principio.

Tenga en cuenta que la propiedad justify-content solo puede realizar acciones si hay espacio libre para la distribución. Por lo tanto, si su conjunto de elementos flexibles ocupa todo el espacio en el eje principal, el uso de justify-content no cambiará nada.

Fig_2. No hay espacio para la redistribución

Si le damos a la propiedad justify-content un valor de fin flexible , entonces todos los elementos se moverán al final de la línea. El espacio libre ahora se ubicará al principio.

Fig_3. Los elementos se alinean al final.

Podemos hacer otras cosas con este espacio. Podríamos pedirle que distribuya entre nuestros elementos flexibles usando justify-content: space-between . En este caso, el primer y el último elemento estarán alineados con los extremos del contenedor y todo el espacio se dividirá por igual entre los elementos.

Fig_4. El espacio libre se distribuye entre los elementos.

Podemos solicitar asignar espacio alrededor de nuestros elementos flexibles usando justify-content: space-around . En este caso, el espacio disponible se asigna y se coloca a cada lado de los elementos.

Fig_5. Los elementos ahora tienen espacio a cada lado de sí mismos.

El último valor para la propiedad justify-content se puede encontrar en la especificación Box Alignment ; no aparece en la especificación de Flexbox . Es el espacio de manera uniforme . En este caso, los elementos se distribuirán de manera uniforme en el contenedor, y el espacio adicional estará entre ellos y en ambos lados.

Fig_6. Los elementos se distribuyen de manera uniforme.

Puedes jugar con todos los valores en una demostración:

Estos valores funcionan de la misma manera si su dirección de flexión es una columna. Sin embargo, es posible que no tenga espacio adicional para la distribución en la columna a menos que agregue la altura o el tamaño del bloque al contenedor flexible, como en la siguiente demostración.

Alinee el eje perpendicular con el contenido de alineación

Si agregó flex-wrap: wrap al contenedor flex y tiene múltiples líneas flex, entonces puede usar la propiedad de alinear contenido para alinear las líneas flex en el eje transversal. Sin embargo, esto requerirá espacio adicional en el eje transversal. En la demostración a continuación, mi eje transversal se ejecuta en una dirección de bloque, es decir en la columna y configuré la altura del contenedor a 60vh. Como esto es más que necesario para mostrar mis artículos flexibles, tengo espacio libre vertical en el contenedor.

Entonces puedo usar align-content con cualquiera de los valores:

Si mi dirección flexible es una columna, entonces alinear contenido funcionará, como en el siguiente ejemplo.

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

Forma abreviada de propiedad de contenido de lugar

En la especificación de Alineación de recuadros , encontramos una forma abreviada de la propiedad de contenido de lugar . Con esta propiedad, puede configurar justify-content y align-content de inmediato. El primer parámetro se especifica para alinear contenido , el segundo para justificar contenido . Si especificó solo un valor, se establece para ambos parámetros, por lo tanto:

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

igual que:

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

Si usaste:

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

entonces será lo mismo que:

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

Alinee el eje perpendicular con elementos de alineación

Ahora sabemos que podemos alinear nuestro conjunto de elementos flexibles o nuestras líneas flexibles como un grupo.

Sin embargo, hay otra manera de alinear nuestros elementos: esta alineación de los elementos entre sí en el eje transversal. Tu contenedor es alto. Esta altura podría determinarse por la altura del elemento más alto como en esta figura.

Fig_7. La altura del contenedor está determinada por el tercer elemento.

En cambio, se puede definir agregando altura al contenedor flexible:

Fig_8. La altura está determinada por el tamaño del contenedor flexible.

La razón por la cual los elementos flexibles se estiran al tamaño del elemento más alto es porque el valor inicial para el parámetro de alinear elementos es estirar . Y los elementos se estiran a lo largo del eje transversal para obtener el tamaño del contenedor flexible en esa dirección.

Tenga en cuenta que en el caso de los elementos de alineación, el valor se refiere , y si hay un contenedor flexible de varias líneas, cada línea actúa como un nuevo contenedor flexible. El elemento más alto en esta fila determinará el tamaño de todos los elementos en la fila.

Además del valor de estiramiento inicial, puede establecer elementos de alineación para inicio flexible , en cuyo caso están alineados al comienzo del contenedor y ya no están estirados en altura.

Fig_9. Elementos alineados al comienzo del eje transversal.

El valor del extremo flexible los mueve al final del contenedor a lo largo del eje transversal.

Fig_10. Elementos alineados al final del eje transversal.

Si utiliza el valor central , todos los elementos están centrados entre sí:

Fig_11. Elementos centrados en el eje transversal.

También podemos hacer una alineación de referencia. Esto garantiza que las líneas de base del texto estén alineadas, no los márgenes alrededor del contenido.

Fig_12. Alineación de línea de base

Puede probar estos valores en la demostración:

Alineación individual con align-self

La propiedad align-items significa que puede establecer la alineación de todos los elementos a la vez. De hecho, establece los valores de la propiedad de alineación propia de los elementos flexibles individuales para todo el grupo.

También puede usar la propiedad align-self de cualquier elemento flexible individual para alinearlo dentro de la línea flexible con otros elementos flexibles.

En el siguiente ejemplo, utilicé align-items en el contenedor para establecer la alineación del grupo en el centro, pero también usé align-self para el primer y último elemento para cambiar su valor de alineación.

¿Por qué no hay autonivelación?

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 Flexbox para la alineación en el eje principal? Si piensa en justificar el contenido y alinear el contenido como una distribución del espacio, la razón de la falta de autoajuste se vuelve más obvia. Tratamos los elementos flexibles como un grupo y asignamos el espacio disponible de cierta manera, ya sea al principio o al final del grupo, o entre elementos.

Si también puede ser útil pensar en cómo justificar el contenido y el trabajo de alineación de contenido en un diseño de cuadrícula CSS. En la cuadrícula, estas propiedades se utilizan para distribuir espacio libre en el contenedor de la cuadrícula entre las pistas de la cuadrícula. Una vez más, tomamos las pistas como un grupo, y estas propiedades nos dan la oportunidad de distribuir cualquier espacio adicional entre ellas. Dado que actuamos en un grupo tanto en Grid como en Flexbox, no podemos apuntar al elemento por nuestra cuenta y hacer algo más con él. Sin embargo, hay una manera de lograr el tipo de diseño que solicita cuando solicita una propiedad propia en el eje principal, y es utilizar campos automáticos.

Uso de sangría automática en el eje principal

Si alguna vez ha centrado un bloque en CSS (por ejemplo, un contenedor para el contenido de la página principal al configurar el margen a la izquierda y a la derecha en automático ), entonces ya tiene algo de experiencia con los campos automáticos. La sangría establecida en automático intentará obtener el mayor tamaño posible en la dirección establecida. En el caso de usar sangría para centrar el bloque, configuramos tanto la izquierda como la derecha en auto . Cada uno de ellos está tratando de ocupar la mayor cantidad de espacio posible y, por lo tanto, aprieta nuestro bloque en el centro.

La sangría funciona muy bien en Flexbox para alinear elementos individuales o grupos de elementos en el eje principal. En el siguiente ejemplo, logro un patrón de diseño común. Tengo una barra de navegación que usa Flexbox , los elementos se muestran como una cadena y usan el valor inicial justify-content: start . Me gustaría que el último elemento se muestre por separado de los demás al final de la línea flexible, siempre que la línea tenga suficiente espacio para esto.

Apunto a este elemento del menú y le doy margen automático izquierdo . Esto significa que el campo está tratando de obtener la mayor cantidad de espacio posible a la izquierda del elemento, empujándolo hacia la derecha.

Si usa la sangría automática en el eje principal, la propiedad justify-content dejará de crear cualquier efecto, ya que la sangría automática ocupará todo el espacio que de otro modo se distribuiría usando justify-content .

Alineación de respaldo

Cada método de alineación describe en detalle la asignación de respaldo, esto es lo que sucede si no se puede lograr la alineación solicitada. Por ejemplo, si solo tiene un elemento en un contenedor flexible y solicita justify-content: space-between , ¿qué debería suceder? La respuesta es que la alineación alternativa utiliza flex-start , y un elemento se alineará al comienzo del contenedor flexible. En el caso de justify-content: space-around , se usa la alineación de respaldo en el centro.

En la especificación actual, no puede cambiar la configuración de alineación de la copia de seguridad. Por lo tanto, si prefiere que la opción de reserva para el espacio intermedio sea ​​el centro en lugar del inicio flexible , entonces no hay forma de hacerlo. Pero hay una nota en la especificación que establece que esta característica puede incluirse en niveles futuros.

Alineación segura e insegura

Una adición muy reciente a la especificación de Alineación de caja es el concepto de alineación segura e insegura utilizando 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á del borde de la página.

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

Fig_13. La alineación insegura proporcionará la alineación requerida, pero puede provocar la pérdida de datos

La alineación segura evitará 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; } 

Fig_14. La alineación segura intenta evitar la pérdida de datos

Estas palabras clave tienen una compatibilidad limitada con el navegador en este momento, sin embargo, demuestran la esencia del control adicional introducido en Flexbox a través de la especificación Box Alignment .

Al final

Las propiedades de alineación comenzaron como una lista en Flexbox , pero ahora tienen sus propias especificaciones y se aplican también a otros contextos de diseño. Algunos datos clave lo ayudarán a recordar cómo usarlos en Flexbox :

• justificar eje principal y alinear eje transversal;
• Para usar alinear contenido y justificar contenido , necesita espacio libre para el juego;
• Las propiedades de alinear contenido y justificar contenido tratan con elementos como un grupo, compartiendo espacio. Por lo tanto, no puede configurarlos en un elemento separado y, por lo tanto, no hay una autoalineación para estas propiedades;
• Si desea alinear un elemento o dividir un grupo en el eje principal, use sangría automática para esto;
• La propiedad align-items establece todos los valores de align-self del grupo. Use align-self en el elemento hijo para establecer el valor de un elemento individual.