Advertisement
  1. Web Design
  2. Flexbox

Una guía completa sobre la ordenación y la reordenación en flexbox

by
Read Time:9 minsLanguages:

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

El módulo de maquetación flexbox nos permite colocar elementos flexibles en cualquier orden y dirección. La ordenación en flexbox es, de hecho, más fácil que ordenar elementos con flotación o cuadrículas CSS, aunque al principio posiblemente no te lo parezca. Como flexbox es un modelo de maquetación unidimensional, a diferencia de la cuadrícula CSS que es bidimensional, sólo tienes que prestar atención a una dirección. Las reglas también están claramente definidas por W3C, por lo que no tendrás que lidiar con el habitual lío de los "floats" y los "clearfixes".

Al leer esta guía, aprenderás a usar las siguientes propiedades de flexbox utilizadas para ordenar:

  • flex-direction
  • flex-wrap
  • flex-flow
  • order

Ordenar vs. Reordenar

Cuando hablamos de la ordenación en flexbox, debemos aclarar la diferencia entre ordenar y reordenar.

¿Qué es ordenar?

Cuando configuramos una maquetación flexbox, primero necesitamos definir el orden de origen, lo que significa que tenemos que decidir cómo van a estar posicionados los ejes del contenedor flexible. Escribí en detalle sobre cómo funcionan los ejes de flexbox en mi guía sobre la alineación de flexbox.

En resumen, cada contenedor flexible tiene dos ejes: el eje principal y el eje transversal. El eje principal tendrá una de las cuatro direcciones, y el eje transversal siempre será perpendicular a aquel:

  1. de izquierda a derecha
  2. de derecha a izquierda
  3. de arriba a abajo
  4. de abajo hacia arriba
The cross axis is always perpendicular to the main axis The cross axis is always perpendicular to the main axis The cross axis is always perpendicular to the main axis
El eje transversal siempre es perpendicular al eje principal.

Configuramos el eje principal con la propiedad flex-direction y, a continuación, decidimos cómo se ajustarán los elementos flexibles, utilizando la propiedad flex-wrap. Estas dos propiedades determinan cómo presentará el explorador los elementos dentro del contenedor flexible.

Entonces, ¿qué es reordenar?

Flexbox también nos permite manipular el origen predeterminado de la ordenación, reordenando eficazmente, con ayuda de la propiedad order. Reordenar significa que cambiamos la representación visual de los elementos, aunque el orden de origen permanece intacto.

Si usamos las capacidades de reordenación de flexbox, no tendremos que cambiar la estructura del documento HTML para alterar simplemente la presentación visual. Por lo tanto, los usuarios de lectores de pantalla (y los motores de búsqueda) podrán obtener el contenido de una manera lógicamente estructurada (por ejemplo, la barra lateral no tendrá prioridad sobre el contenido principal).

Ordenación en flexbox

El orden de Flexbox se articula mediante las propiedades flex-direction y flex-wrap. Flex-direction establece la dirección del eje principal. Puede tomar los siguientes valores:

  1. Eje principal (predeterminado) row: de izquierda a derecha
  2. Eje principal inverso row-reverse: de derecha a izquierda
  3. Eje principal column: de arriba a abajo
  4. Eje principal column-reverse: de abajo a arriba

Flex-wrap define si los elementos flexibles se colocan en una sola línea o se ajustan ocupando varias líneas. También controla la dirección del eje transversal. Puede tener tres valores:

  1. nowrap (predeterminado) despliega los elementos flexibles en una sola línea; el eje transversal se encuentra en la posición predeterminada
  2. wrap despliega los elementos flexibles en varias líneas; el eje transversal se mantiene en la posición predeterminada
  3. wrap-reverse despliega los elementos flexibles en varias líneas; el eje transversal se invierte

La posición predeterminada del eje transversal es:

  • De arriba a abajo para row y row-reverse
  • De izquierda a derecha en el caso de column y column-reverse

En mi artículo anterior sobre la alineación de flexbox, puedes encontrar cuatro detallados ejemplos (con demostraciones) sobre cómo configurar el eje principal en cuatro direcciones diferentes utilizando flex-direction. Sin embargo, cuando hablamos sobre la ordenación de flexbox, creo que es más importante saber cómo utilizar las propiedades flex-direction y flex-wrap juntas para lograr el orden de origen que estemos buscando.

Un rápido ejemplo de código

Usaremos un simple ejemplo de código para ver cómo funciona la ordenación de flexbox. Aquí el HTML consta sólo de unos pocos divs:

El div .container será el contenedor flex y los divs con la clase .item serán los elementos flexibles. Usaremos (casi) el mismo CSS en todos los ejemplos, solo cambiarán las propiedades flex-direction y flex-wrap. Así es como se ve nuestro CSS con los valores row y wrap:

Este es el mismo ejemplo en una demostración de CodePen:

Ordenar con Row y Column

Ahora, ¡llegamos a la parte realmente interesante! En teoría no es demasiado difícil entender la ordenación de flexbox, pero en la práctica utilizarlo puede ser sin duda un desafío. Esto sucede porque es difícil ver cómo las diferentes variaciones de flex-direction y flex-wrap se comparan entre sí.

En el pen incrustado de abajo, puedes ver cómo funcionan juntas las maquetaciones flex-direction: row y flex-direction: column con diferentes valores de la propiedad flex-wrap. Usa los controles para ver distintas combinaciones.

Como puedes ver, cuando flex-direction es row, los elementos flexibles se distribuyen horizontalmente, de izquierda a derecha. Cuando usamos wrap-reverse en lugar de wrap, flexbox comienza a desplegar los elementos desde la parte inferior, en lugar de hacerlo desde la parte superior. Esto sucede porque el ajuste wrap-reverse invierte la dirección del eje transversal.

Cuando flex-direction es column, los elementos se distribuyen verticalmente, de arriba a abajo. Y, cuando usamos wrap-reverse en lugar de wrap, flexbox comienza a colocarlos desde la derecha (ahora este es el punto de partida del eje transversal), en lugar de hacerlo desde la izquierda.

Ordenar con row-reverse y column-reverse

Ahora, echemos un vistazo a cómo establece flexbox los elementos cuando flex-direction es row-reverse y column-reverse.

Como puedes ver en la anterior demostración, flexbox comienza a desplegar los elementos desde el inicio del eje principal en ambos casos, al igual que antes. El eje principal de la maquetación de row-reverse se ejecuta de derecha a izquierda, por lo que flexbox comienza a desplegar los elementos desde la derecha. Y el eje principal del diseño con column-reverse se ejecuta de abajo hacia arriba, por lo que los elementos comienzan a fluir desde la parte inferior del contenedor flexible.

Cuando usamos flex-wrap: wrap, flexbox comienza a desplegar los elementos desde la parte superior cuando flex-direction es row-reverse y desde la izquierda cuando es column-reverse, ya que estos son los puntos de partida del eje transversal en los respectivos casos.

Cuando volteamos la dirección del contenedor a flex-wrap: wrap-reverse, el eje transversal se ejecutará en la dirección opuesta. Apuntará de abajo a arriba cuando flex-direction sea row-reverse, y de derecha a izquierda cuando sea column-reverse.

Acelera las cosas con la abreviatura flex-flow

CSS también tiene una genial abreviatura para las propiedades flex-direction y flex-wrap. Se llama flex-flow. Para usarlo, necesitamos enumerar las dos propiedades una tras otra de la siguiente manera:

Reordenación de flexbox

Es hora de ver las cosas de una forma un poco diferente.

La propiedad order cambia el orden predeterminado de los elementos flexibles que definimos con flex-direction y flex-flow. Sólo afecta a la representación visual de los elementos, por lo que no alterará la forma en la que los lectores de pantalla y otros agentes de usuario que no sean CSS leen el código fuente.

A diferencia de las propiedades mencionadas anteriormente, usamos order en los elementos flexibles, en lugar de en contenedor flex. Puede tomar cualquier valor entero y su valor predeterminado es 0.

En el ejemplo siguiente el elemento .item-3 se desplaza al punto inicial del eje principal. Como todos los elementos tienen 0 como valor predeterminado, basta usar la regla order: -1 para convertirlo en el primer elemento dentro del contenedor:

Notarás que podemos usar la misma lógica para mover el .item-3 al final del eje principal. Sólo necesitamos definir para él un valor order positivo.

Por supuesto, podemos reordenar tantos de estos elementos flexibles como deseemos (pero ten en cuenta que reordenarlo todo probablemente no sea nunca la decisión más amigable desde el punto de vista de la accesibilidad). Las propiedades order de los diferentes elementos flex siempre son relativas entre sí. A continuación, puedes ver cómo reordenar varios elementos dentro del contenedor flex.

Ordenación y accesibilidad

Lo más importante que debes entender acerca de todo esto es que la propiedad order no afecta al orden de la estructura, el habla, ni al de la navegación secuencial. Esto significa que cuando modificamos el orden de nuestros elementos flexibles, los usuarios de medios no visuales no experimentarán los cambios. Por ejemplo, las personas que dependen de la navegación por teclado seguirán moviéndose a través de los enlaces según el orden de origen original.

Este comportamiento de flexbox puede ser útil en algunos casos. Por ejemplo, es posible hacer que el llamado "Holy Grail Layout" sea accesible con la ayuda de la ordenación de flexbox. El Holy Grail Layout es el popular diseño de blog con una cabecera, un pie de página y dos columnas laterales: una a la izquierda y otra a la derecha del contenido principal.

En este diseño, normalmente colocamos la columna lateral izquierda antes del contenido principal en el código HTML. Sin embargo, desde el punto de vista de la accesibilidad, los usuarios de tecnologías de asistencia deberían encontrar primero el contenido principal. Flexbox es perfecto para esto. Podemos colocar el contenido principal antes de las dos columnas laterales en el código de nuestra estructura. De esta manera, sólo tendremos que poner la columna lateral y el contenido principal en la posición correcta usando la propiedad order:

Flexbox y los modos de escritura

Todo lo que se dice en este tutorial se aplica al modo de escritura LTR (de izquierda a derecha). Los ejes de flexbox siguen la dirección de escritura del documento, que se puede establecer con las propiedades direction y writing-mode. Esta es la razón por la que en el modo de escritura LTR, el eje principal se ejecuta de izquierda a derecha cuando flex-direction es row. En el modo de escritura RTL se ejecuta en la dirección opuesta, de derecha a izquierda, y todo lo demás cambia en consecuencia.

¡Eso es un contenedor (flexible)!

Este tutorial constituye la segunda parte de mi serie sobre flexbox. Asegúrate de leer la primera parte sobre la alineación de flexbox, para aprender a alinear elementos flexibles a lo largo del eje principal y el transversal. Si deseas saber más sobre la ordenación de flexbox, MDN tiene también un artículo muy ilustrativo sobre el tema.

Aprende más

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.