CSS: Flex - Organización

Cuando se trabaja con cajas flexibles, puede ser necesario alterar la organización o la distribución de los elementos flexibles (ítems) de su interior. En ese aspecto, CSS ofrece algunas propiedades que permiten alterar tanto la dirección como la posibilidad de desbordamiento de los ítems a una nueva línea.

Propiedades descritas en este artículo:

La propiedad ‘flex-direction’

Para definir la dirección en la que se deben distribuir los elementos flexibles se usa la propiedad flex-direction. De esta forma es posible alterar el eje por defecto, que es el horizontal. También es posible invertir la dirección de los ejes. Esta propiedad también se aplica sobre el elemento contenedor.

Valores de la propiedad flex-direction:

Por defecto, los ítems se distribuyen en horizontal, de izquierda a derecha, equivalente a estar usando el valor row. Vamos a ver un ejemplo.

Código CSS:

.izquierda-derecha {
  display: flex;
  flex-direction: row;
}

.item {
  background: salmon;
  border: 1px solid black;
  color: black;
  width: 40px;
}

Código HTML:

<div class="izquierda-derecha">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Resultado:

1

2

3

4

5

Volviendo al ejemplo anterior, vamos a invertir los ítems con el valor row-reverse, así aparecerán ubicados de derecha a izquierda.

Código CSS:

.derecha-izquierda {
  display: flex;
  flex-direction: row-reverse;
}

Resultado:

1

2

3

4

5

En el siguiente ejemplo el cambio será más grande: vamos a distribuir los ítems verticalmente, por lo que vamos a usar el valor column.

Código CSS:

.arriba-abajo {
  display: flex;
  flex-direction: column;
}

Resultado:

1

2

3

4

5

Finalmente, vamos a invertir el orden de los ítems para que aparezcan de abajo a arriba. Para ello se usa el valor column-reverse.

Código CSS:

.abajo-arriba {
  display: flex;
  flex-direction: column-reverse;
}

Resultado:

1

2

3

4

5

La propiedad ‘flex-wrap’

Cuando los elementos de dentro del contenedor flexible no tienen espacio suficiente, se van haciendo cada vez más pequeños. Esto puede llevar a diseños no deseados. Por ejemplo, puede que en un caso concreto, el diseñador web desee que todos los ítems tengan un ancho mínimo determinado.

Con la propiedad flex-wrap es posible ajustar la línea para conseguir que los ítems que no caben en una sola fila o columna salten a la siguiente. Con este método se consigue, por tanto, crecer en una segunda dirección, la que es perpendicular o transversal respecto a la dirección principal.

Valores de la propiedad flex-wrap:

En el siguiente ejemplo vamos a crear varios ítems para provocar que se ajusten al contenedor flexible. El valor nowrap es el valor por defecto.

Código CSS:

.sin-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.sin-wrap .item {
  width: 200px;
}

Resultado:

1

2

3

4

5

Se ha dado una anchura de 200 píxeles a los ítems para que se tengan que ajustar al contenedor. Como resultado, son más estrechos.

En el siguiente ejemplo vamos a provocar un desbordamiento a la fila siguiente. Para verlo mejor, haremos que el contenedor sea más estrecho (200 píxeles) y que cada ítem tenga una ancho de 80 píxeles. Así solo caben dos en cada fila. El valor que vamos a usar para este caso es wrap.

Código CSS:

.con-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.con-wrap .item {
  width: 80px;
}

Resultado:

1

2

3

4

5

Debido a que los ítems tienen un ancho de 80 píxeles, solo caben dos en la primera fila del contenedor. Los ítems 3 y 4 han saltado a la segunda fila, mientras que el quinto ítem ha saltado a la tercera fila.

Finalmente vamos a ver el uso del valor wrap-reverse, en el que se provoca un desbordamiento de ítems, pero con el orden invertido.

Código CSS:

.con-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 200px;
}

.con-wrap-reverse .item {
  width: 80px;
}

Resultado:

1

2

3

4

5

En este ejemplo, los ítems se desbordan en el orden inverso. En la última fila se observa los ítems 1 y 2, mientras que el 3 y 4 desbordan en la segunda. El quinto ítem está en la tercera, arriba del todo.

La propiedad ‘flex-flow’

La propiedad CSS flex-flow es una abreviatura (shorthand) que unifica las propiedades flex-direction y flex-wrap. El primer parámetro será el valor de dirección, mientras que el segundo será el de desbordamiento.

Algunos ejemplos de la propiedad flex-flow:

.ejemplo1 {
  flex-flow: row wrap;
}

.ejemplo2 {
  flex-flow: column-reverse nowrap;
}

.ejemplo3 {
  flex-flow: row-reverse wrap-reverse;
}