Una guía completa para la alineación de Flexbox

La alineación es probablemente el aspecto más confuso de flexbox. La módulo de diseño de flexbox tiene un puñado de propiedades de alineación que se comportan de manera diferente en diferentes circunstancias y, al usarlas, es posible que no comprenda necesariamente qué está sucediendo o por qué.

Sin embargo, si sabe a qué prestar atención, la alineación es menos complicada de lo que parece. Este tutorial lo ayudará a comprender perfectamente la alineación de flexbox.

Esta guía de Flexbox

En esta guía de flexbox cubriremos las siguientes cosas:

  • Video explicativo: Alineación de caja flexible
  • A Tale of Two Axes (Cómo usar los ejes principal y transversal en flexbox)

  • Empiece por definir el eje principal
  • Propiedades de alineación de Flexbox
  • Alineación a lo largo del eje principal
  • Alineación a lo largo del eje transversal

Explicador: Alineación Flexbox

Mira este video explicativo si prefieres que las cosas sean visuales; ¡Siga leyendo para ver la versión escrita a continuación!

Historia de dos ejes

Cuando usamos flexbox trabajamos con dos ejes: la principal y cruzar ejes. Como sugieren sus nombres, estos ejes forman una relación jerárquica, siendo el eje principal superior al eje transversal.

El eje transversal es siempre perpendicular al eje principal.

Esta relación jerárquica constituye la principal diferencia entre flexbox y CSS Grid Layout. Por diseño, la cuadrícula CSS tiene dos ejes no jerárquicos: los ejes de fila y columna. Esto se debe a que los creadores de los estándares web pretendían que la cuadrícula CSS se utilizara como modelo de diseño bidimensional. Flexbox, por otro lado, tiene un eje primario y uno secundario, ya que su propósito es ser un modelo de diseño unidimensional. Lo bueno de flexbox es que puede definir la dirección de esa dimensión configurando la posición del eje principal, por lo tanto, puede crear diseños basados ​​en filas y en columnas.

Para evitar confundirse con las propiedades de alineación, siempre tenga en cuenta que cuando usa flexbox, está trabajando con un modelo unidimensional. Incluso si su diseño parece tener dos dimensiones (es decir, filas y columnas), los elementos flexibles solo pueden fluir en una dirección, a lo largo del eje principal. Puede justificar los elementos flexibles en esa dirección y alinear el espacio entre los elementos individuales a lo largo del eje transversal.

Empiece por definir el eje principal

La dirección del eje principal está determinada por la dirección flexible propiedad: hay cuatro valores posibles:

  1. flex-direction: row; – el eje principal corre de izquierda a derecha (este es el valor predeterminado)
  2. flex-direction: row-reverse; – el eje principal corre de derecha a izquierda
  3. flex-direction: column; – el eje principal va de arriba a abajo
  4. flex-direction: column-reverse; – el eje principal va de abajo hacia arriba

Veamos cómo se ve esto en el navegador. Usaré un marcado HTML muy simple, solo nueve cajas apiladas una sobre otra:

El div exterior con el .container clase será el contenedor flexible y los divs internos con el .item clase serán los elementos flexibles.

1. De izquierda a derecha: fila

Como se mencionó, la dirección de flexión predeterminada es row; si no establece nada más, este será el valor utilizado. Como puede ver a continuación, solo agregué propiedades relacionadas con flexbox al contenedor flexible. A los artículos flexibles se les han dado algunas propiedades con fines decorativos:

Cuándo flex-direction es row, el eje principal corre horizontalmente, de izquierda a derecha. Por lo tanto, esta es la dirección en la que se colocan los artículos flexibles. El eje transversal corre perpendicularmente, de arriba a abajo, y cuando los artículos se envuelven, lo hacen en esta dirección.

2. De derecha a izquierda: reversa en fila

Cuando se le da el valor a flex-direction row-reverse, la posición de los ejes permanece igual, lo que significa que el eje principal seguirá funcionando horizontalmente y el eje transversal verticalmente. Sin embargo, la fila dirección se invertirá: de derecha a izquierda a lo largo del eje principal.

Si observa la numeración de los elementos flexibles, puede ver que ahora, cada fila está numerada de derecha a izquierda, pero los elementos aún se envuelven verticalmente hacia abajo.

Si también desea invertir la dirección del eje transversal, debe usar wrap-reverse sobre el flex-wrap propiedad. Encuentra la diferencia:

3. De arriba a abajo: columna

Cuando el flex-direction se establece en column, los ejes principal y transversal cambian de posición. El eje principal correrá verticalmente (de arriba a abajo) y el eje transversal correrá horizontalmente (de izquierda a derecha).

Ahora verá que la numeración de los elementos flexibles no sigue a las filas, sino a las columnas. Aquí es donde la naturaleza unidimensional de flexbox es probablemente más visible. Los artículos se envolverán solo si el contenedor tiene una altura fija.

4. De abajo hacia arriba: columna al revés

Supongo que aquí se está desarrollando un patrón. Cuándo flex-direction se establece en column-reverse, el eje principal sigue siendo vertical y el eje transversal sigue siendo horizontal, tal como vimos en el ejemplo anterior. Sin embargo, la dirección de la columna se invierte, por lo que el eje principal apunta de abajo hacia arriba.

Como puede ver a continuación, la numeración de los elementos flexibles comienza en la parte inferior izquierda, moviéndose hacia arriba y hacia la derecha.

Nuevamente, para cambiar la dirección del eje transversal, debe usar wrap-reverse sobre el flex-wrap propiedad.

Taquigrafía de flujo flexible

La flex-flow propiedad es una abreviatura de flex-direction y flex-wrap. Por ejemplo, puede utilizar:

en vez de:

Propiedades de alineación de Flexbox

La alineación de la caja flexible puede ocurrir a lo largo del eje principal y transversal.

Una de las propiedades (justify-content) pertenece al eje principal, mientras que los otros tres (align-items, align-self, align-content) pertenecen al eje transversal.

Como era de esperar, el comportamiento de las propiedades de alineación depende de la propiedad de dirección flexible. Por ejemplo, justify-content alinea los elementos horizontalmente si flex-direction es row o row-reverse, pero verticalmente si flex-direction es column o column-reverse. Esta es la verdadera belleza de un flexible caja.

Alineación a lo largo del eje principal

La justificar el contenido La propiedad alinea los elementos flexibles dentro del contenedor flexible a lo largo del eje principal. Distribuye el espacio adicional que queda después de que el navegador ha calculado el espacio necesario para todos los elementos en el contenedor flexible. La propiedad justify-content puede tomar cinco valores:

  1. flex-start – los elementos flexibles se justifican hacia el inicio del eje principal (este es el valor predeterminado)
  2. flex-end – los elementos flexibles se justifican hacia el final del eje principal
  3. center – los elementos flexibles se justifican alrededor del centro del eje principal
  4. space-between – los elementos flexibles se distribuyen uniformemente a lo largo del eje principal, desde el inicio flexible hasta el final flexible
  5. space-around – los elementos flexibles se distribuyen uniformemente a lo largo del eje principal, pero se agregan espacios de la mitad del tamaño en cada extremo

Usar justify-content correctamente, debe prestar atención a las direcciones de sus ejes. Por ejemplo, el justify-content: flex-start; La regla siempre aprieta los elementos flexibles al inicio del eje principal. Este es el extremo izquierdo cuando la dirección de flexión es row, el extremo correcto cuando es row-reverse, el punto más alto cuando es columny el punto más bajo cuando es column-reverse.

El siguiente lápiz muestra cómo los diferentes valores de la justify-content propiedad alinea elementos flexibles cuando la dirección flexible es row.

Alineación a lo largo del eje transversal

Es hora de llevar las cosas al siguiente nivel. Puedes usar Tres Propiedades CSS para alinear elementos a lo largo del eje transversal. Dos de ellos (align-items y align-self) son para alineación de una sola línea, mientras que align-content es para alineación multilínea.

Alineación de una sola línea

La align-items y align-self Las propiedades definen cómo se distribuye el espacio entre elementos flexibles a lo largo del eje transversal. De hecho, ambos hacen lo mismo, pero mientras align-items alinea todos los elementos dentro del contenedor flexible, align-self anula esta alineación predeterminada para elementos flexibles individuales.

Ambos pueden tomar los siguientes valores:

  1. auto – hace que la propiedad align-self herede el valor de align-items (predeterminado para align-self)
  2. flex-start – los elementos flexibles están alineados hacia el inicio del eje transversal
  3. flex-end – los elementos flexibles están alineados hacia el final del eje transversal
  4. center – los elementos flexibles están alineados alrededor del centro del eje transversal
  5. baseline – los elementos flexibles están alineados de modo que su alineación de la línea de base alinearse
  6. stretch – los elementos flexibles se estiran a lo largo del eje transversal para llenar el contenedor flexible (predeterminado para elementos de alineación)

El bolígrafo a continuación muestra cómo align-items y align-self las propiedades se comportan cuando la dirección flexible es row. El eje transversal por defecto va de arriba a abajo. Los artículos tienen diferentes cantidades de acolchado para cambiar sus alturas y líneas de base. Puede ver, por ejemplo, el flex-start valor alinea los elementos al inicio del eje transversal, mientras que flex-end los alinea hasta el final.

Naturalmente, cuando flex-direction es column o column-reverse, trabajará con un diseño basado en columnas para que el align-items y align-self las propiedades alinearán los elementos horizontalmente en su lugar.

Alineación multilínea

La alinear contenido La propiedad hace posible la alineación de varias líneas a lo largo del eje transversal. Determina cómo se espacian los elementos flexibles en varias líneas entre sí. La propiedad align-content no tiene ningún efecto en un contenedor flexible de una sola línea (por ejemplo, cuando el contenido no se ajusta). Puede tomar seis valores diferentes:

  1. flex-start – los elementos flexibles están alineados al inicio del eje transversal
  2. flex-end – los elementos flexibles están alineados al final del eje transversal
  3. center – los elementos flexibles están alineados alrededor del centro del eje transversal
  4. space-between – los elementos flexibles se distribuyen uniformemente a lo largo del eje transversal, entre el inicio flexible y el final flexible
  5. space-around – los elementos flexibles se distribuyen uniformemente a lo largo del eje transversal, pero se agregan espacios de la mitad del tamaño en cada extremo
  6. stretch – los elementos flexibles se estiran a lo largo del eje transversal para llenar el contenedor flexible (este es el valor predeterminado)

A continuación, puede ver varios bolígrafos que muestran cómo los diferentes valores de la align-content obra inmobiliaria. Al igual que con nuestras otras demostraciones, se aplican las direcciones de eje predeterminadas.

Estos dos primeros ejemplos no tienen una propiedad de una sola línea (align-items) definido, por lo que notará que todos los elementos se estiran de forma predeterminada. En este siguiente ejemplo estableceremos align-items: flex-start; de manera que la artículos alinear hacia el inicio del eje transversal, pero estableceremos align-content: flex-end; de manera que la contenido está alineado hacia el final del eje:

Si ha comprendido todo lo que hemos repasado hasta ahora, ¡lo ha hecho muy bien! Ahora tiene un conocimiento básico sólido de la alineación de flexbox.

Conclusión

¡Terminamos! Recordar; Lo más importante que debe recordar es que debe tener en cuenta las direcciones de los ejes principal y transversal. Siempre comience su alineación configurando el flex-direction propiedad. Para obtener más información sobre la alineación de flexbox y poner en práctica sus conocimientos, también puede consultar los siguientes recursos:

  • Flexbox
    Una guía completa para realizar pedidos y reordenar Flexbox
    Anna Monus
  • Flexbox
    Flexbox Align: cuándo utilizar márgenes automáticos en lugar de Flexbox Center
    George Martsoukos
  • Diseño de cuadrícula CSS
    Flexbox vs CSS Grid: ¿Cuál debería usar y cuándo?
    Anna Monus
  • Flexbox
    Una guía completa para el dimensionamiento de Flexbox
    Anna Monus

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *