Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Una Guía Comprensible Sobre la Alineación de Flexbox

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La alineación es probablemente el aspecto más confuso de flexbox. El módulo flexbox layout tiene un puñado de útiles propiedades de alineación que se comportan de distinta forma en diferentes circunstancias, y cuando las usamos es probable que no entiendas qué es lo que está sucediendo o por qué. Sin embargo, si sabes a qué debes prestar atención, la alineación es menos complicada de lo que pueda parecer en un principio. Este tutorial te ayudará a entender perfectamente la alineación con flexbox.

Una Historia de Dos Ejes

Cuando usamos flexbox trabajamos dentro de dos ejes: el eje principal y el eje transversal. Como sus nombres sugieren, estos ejes tienen una relación jerárquica, el eje principal es superior a los transversales.

The cross axis is always perpendicular to the main axis
El eje transversal siempre es perpendicular al eje principal.

Esta relación jerárquica es la diferencia principal entre flexbox y CSS Grid Layout. Por diseño, CSS grid tiene dos ejes no jerárquicos: el eje correspondiente a las filas y el correspondiente a las columnas. Esto es así porque los creadores de los estándares web pretendían que CSS grid fuese usado como un modelo de maquetación de dos dimensiones. La mejor parte sobre flexbox es que puedes definir la dirección de esa dimensión estableciendo la posición de los ejes principales, por tanto puedes crear maquetaciones basadas tanto en filas como en columnas.

Para evitar confundirte con las propiedades, recuerda en todo momento que cuando usas flexbox, estás trabajando con un modelo de una dimensión. Incluso aunque el diseño de tu maquetación parezca que tienen dos dimensiones (es decir, filas y columnas), los elementos flex solo pueden fluir en una dirección, a lo largo del eje principal. Puedes justificar los elementos flex en esta dirección y distribuir el espaciado entre los elementos individuales a lo largo del eje transversal.

Empieza Definiendo el Eje Principal

La dirección del eje principal está determinada por la propiedad flex-direction, que cuenta con cuatro posibles valores:

  1. flex-direction: row; – el eje principal se prolonga de izquierda a derecha (valor por defecto)
  2. flex-direction: row-reverse; – el eje principal se prolonga desde la derecha hacia la izquierda
  3. flex-direction: column; – el eje principal se prolonga desde la parte superior hacia abajo
  4. flex-direction: column-reverse; – el eje principal se prolonga desde la parte inferior hacia la superior

Veamos qué aspecto presenta esto en el navegador. Voy a usar una estructura html muy sencilla, compuesta simplemente por nueve bloques apilados unos sobre otros:

El div exterior con la clase .container será el contenedor flex y los divs interiores con la clase .item serán los elementos flex.

1. De Izquierda a Derecha: row

Como hemos mencionado, la dirección flex predeterminada es row; si no indicas nada, este será el valor empleado. Como puedes ver más abajo, solo he añadido propiedades flexbox al contenedor flex. Los elementos flex solo tienen asignadas propiedades decorativas:

Cuando flex-direction está establecido a row, el eje principal es el horizontal, desde la izquierda a la derecha. Esta es por tanto la dirección a lo largo de la cual son desplegados los elementos flex. El eje transversal se prolonga perpendicularmente, desde la parte superior a la inferior, y cuando los elementos se apilan, lo hacen en esta dirección.

2. De Derecha a Izquierda: row-reverse

Cuando a la dirección flex le aplicamos el valor row-reverse, la posición del axis permanece igual, lo que significa que el eje principal todavía será recorrido horizontalmente y el eje perpendicular a este, será recorrido verticalmente. Sin embargo, la dirección horizontal será invertida, recorriéndose el eje principal desde la derecha hacia la izquierda.

Si te fijas en la numeración de los elementos flex, podrás ver esa fila, cada fila está numerada de derecha a izquierda, pero los elementos todavía se apilan verticalmente desde arriba hacia abajo.

Si además quieres invertir la dirección del eje vertical, tienes que usar wrap-reverse en la propiedad flex-wrap. Capta la diferencia:

3. De Arriba hacia Abajo: column

Cuando se establece flex-direction a column, los ejes principal y vertical cambian sus posiciones. El eje principal funcionará como eje vertical (de arriba hacia abajo) y el eje vertical lo hará ahora horizontalmente (de izquierda a derecha).

Comprobarás como ahora la numeración de los elementos flex no siguen las filas, sino las columnas. Aquí es donde probablemente la naturaleza con una sola dimensión de flexbox es más visible que nunca. Los elementos se apilarán sólo si el elemento contenedor tiene asignado un valor fijo para su altura.

4. De Abajo Hacia Arriba: column-reverse

Espero que estés entendiendo el patrón que se está desarrollando aquí. Cuando flex-direction es establecido a column-reverse, el eje principal sigue siendo vertical y el eje perpendicular sigue siendo horizontal, tal y como vimos en el anterior ejemplo. Sin embargo, la dirección de la columna se invierte de tal manera que el eje principal sigue es recorrido desde abajo hacia arriba.

Como puedes ver más abajo, la numeración de lo elementos flex se inicia desde la parte inferior y hacia la izquierda, avanzando hacia arriba y hacia la derecha.

De nuevo, para cambiar la dirección del eje perpendicular, necesitarás usar wrap-reverse en la propiedad flex-wrap.

Abreviación Flex-flow

La propiedad flex-flow es una abreviación para flex-direction y flex-wrap. Puedes usarla, por ejemplo, de la siguiente forma:

en lugar de:

Propiedades de Alineación de Flexbox

La alineación flexbox puede darse a lo largo de ambos ejes, el principal y el perpendicular.

Una de las propiedades (justify-content) pertenece al eje principal, mientras que las tres restantes (align-items, align-self, align-content) pertenece al eje perpendicular.

Como puedes imaginar, el comportamiento de las propiedades de alineación depende de la propiedad flex-direction. Por ejemplo, justify-content alinéa los elementos horizontalmente si flex-direction tiene el valor row o row-reverse, y verticalmente si flex-direction tiene el valor column o column-reverse. Esta es la belleza real de un contenedor flexible.

Alineación A lo Largo del Eje Principal

La propiedad justify-content alinéa los elementos flex dentro del contenedor flex a lo largo del eje principal. Esta propiedad distribuye el espacio extra sobrante en el lateral izquierdo después de que el navegador haya calculado el espacio necesario para ubicar todos los ítems en el contenedor flex. La propiedad justify content puede tomar cinco valores:

  1. flex-start – los elementos flex se justifican a partir del punto de inicio del eje principal (este es el comportamiento predeterminado).
  2. flex-end – los elementos flex se justifican desde el final del eje principal.
  3. center – los elementos flex se justifican partiendo desde el centro del eje principal.
  4. space-between – los elementos flex se distribuyen uniformemente a lo largo del eje principal, desde flex-start hasta flex-end.
  5. space-around – los elementos flex se distribuyen uniformemente a lo largo del eje principal, pero se añaden espacios extra iguales a la mitad del resto en ambos extremos.

Para usar la adecuadamente justify-content, tienes que prestar atención a las direcciones de tus ejes. Por ejemplo, la regla justify-content: flex-start, siempre distribuye los elementos flex desde el punto inicial del eje principal. Este punto se corresponderá con el extremo izquierdo cuando flex-direction sea row, y con el derecho cuando sea row-reverse, el punto superior cuando sea column, y el más bajo cuando sea column-reverse.

El siguiente pen muestra cómo los distintos valores de la propiedad justify-content alinéa los elementos flex cuando flex-direction es row.

Alineación a lo Largo del Eje Perpendicular

Es el momento de llevar las cosas al siguiente nivel. Puedes usar tres propiedades CSS para alinear los elementos a lo largo del eje perpendicular. Dos de ellos (align-items y align-self) son para alinear una sola línea, mientras que align-content es para alinear múltiples líneas.

Alineación de Una Única Línea

Las propiedades align-items y align-self definen la forma en la que es distribuido el espacio entre los elementos flex a lo largo del eje perpendicular. De hecho, ambos hacen lo mismo, pero mientras align-items alinea todos los elementos dentro del contenedor flex, align-self reemplaza esta alineación predeterminada en algunos elementos flex individuales.

Ambas propiedades pueden tomar los siguientes valores:

  1. auto – hace que la propiedad align-self herede el valor align-items (predeterminada para align-self)
  2. flex-start – los elementos flex se alinean desde el inicio del eje perpendicular
  3. flex-end – los elementos flex se alinean desde el final del eje perpendicular
  4. center – los elementos flex se alinean en el centro del eje perpendicular
  5. baseline – los elementos flex se alinean de tal forma que su línea de base coincida
  6. strech – los elementos flex se distribuyen a lo largo del eje perpendicular repartiéndose y ocupando el contenedor flex (predeterminado para align-items)

El pen de abajo muestra la forma en la que las propiedades align-items y align-self se comportan cuando la dirección es row. El eje perpendicular se desarrolla por defecto desde arriba hacia abajo. Los elementos tienen distintas cantidades de padding de forma que sus alturas y líneas de base varían. Comprueba, por ejemplo, como el valor flex-start alinea los elementos desde el punto de inicio de el eje perpendicular, mientras que flex-end los alinea en el punto final.

Naturalmente, cuando flex-direction está establecido como column o column-reverse, estarás trabajando con una maquetación basada en columnas, de manera que las propiedades align-items y align-self se alinean en cambio en sentido horizontal.

Alineación de Múltiples Líneas

La propiedad align-content posibilita la alineación de múltiples líneas a lo largo del eje perpendicular. Determina la forma en la que los elementos flex en múltiples líneas son separados unos de otros. La propiedad align-content no tiene efecto en un contenedor flex con una sola línea (por ejemplo, cuando el contenido for instance, when the content doesn’t wrap). Puede tomar seis valores distintos:

  1. flex-start – los elementos flex se alinean desde el inicio del eje perpendicular
  2. flex-end – los elementos flex se alinean a partir del final del eje perpendicular.
  3. center – los elementos flex se alinean partiendo del centro del eje perpendicular.
  4. space-between – los elementos flex se distribuyen uniformemente a lo largo del eje perpendicular, entre flex start y flex end.
  5. space-around – los elementos flex se distribuyen uniformemente, pero un valor igual la mitad del espacio entre los elementos es añadido en cada extremo.
  6. strech - los elementos flex se ajustan a lo largo del eje perpendicular ocupando el contenedor (es el comportamiento predeterminado).

A continuación puedes ver varios pens que muestran como funcionan los distintos valores de la propiedad align-content. Al igual que sucede con nuestros otros ejemplos, se aplica la dirección predeterminada del eje.

Estos dos primeros ejemplos no tienen definida una única propiedad de línea (align-items), por tanto comprobarás como por defecto todos los elementos se ajustan uno junto al siguiente. En este próximo ejemplo establecemos align-items: flex-start; de manera que los elementos se alinean a partir de punto inicial del eje perpendicular, pero estableceremos align-content: flex-end; para que el contenido se alinee desde el final del eje.

Si has entendido todo lo que hemos visto hasta ahora, ¡genial! Ahora cuentas con una sólida comprensión del funcionamiento de la alineación con flexbox.

Conclusión

¡Hemos terminado! Para recapitular; lo más importante a recordar es que necesitas tener siempre presente la dirección del eje principal y del perpendicular. Empieza a alinear los elementos estableciendo la propiedad flex-direction. Para aprender más sobre la alineación flexbox y poner en práctica tus conocimientos, puedes consultar los siguientes recursos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.