Lección 4: Flex

A la hora de maquetar disponemos de una herramienta muy poderosa llamada Flex, o cajas flexibles. Controlaremos un grupo de elementos en una dimensión: vertical u horizontal. Podemos controlar el tamaño de los elementos, el espacio entre ellos, el orden, etc.

Debemos tener en cuenta que los elementos que queremos controlar deben estar dentro de un contenedor. Este contenedor será el que tenga la propiedad display: flex.

.grupo-de-elementos {
  display: flex;
}

Por defecto los elementos se colocarán en una sola línea, de izquierda a derecha. Si el contenedor es más pequeño que los elementos, estos se encogerán para caber en el contenedor.

<section class="grupo-de-elementos">
  <article>♠</article>
  <article>♥</article>
  <article>♣</article>
  <article>♦</article>
</section>

Sin usar flex, los elementos se colocarían uno debajo de otro.

Pero aplicando flex, los elementos se colocarán en una sola línea.

Ahora vamos a ver las propiedades más importantes y como podemos personalizar el comportamiento de los elementos en un diseño adaptativo.

flex-direction

Defines la dirección de los elementos.

De izquierda a derecha

.grupo-de-elementos {
  display: flex;
  flex-direction: row;
}

De derecha a izquierda

.grupo-de-elementos {
  display: flex;
  flex-direction: row-reverse;
}

De arriba a abajo

.grupo-de-elementos {
  display: flex;
  flex-direction: column;
}

De abajo a arriba

.grupo-de-elementos {
  display: flex;
  flex-direction: column-reverse;
}

Más información

flex-wrap

Fuerza a los elementos a mantenerse en una sola línea o varias.

nowrap

Una línea.

.grupo-de-elementos {
  display: flex;
  flex-wrap: nowrap;
}

wrap

Varias líneas.

.grupo-de-elementos {
  display: flex;
  flex-wrap: wrap;
}

wrap-reverse

Varias línea en orden inverso.

.grupo-de-elementos {
  display: flex;
  flex-wrap: wrap-reverse;
}

Más información

justify-content

Gestiona la alineación en el eje.

Alinea al centro

.grupo-de-elementos {
  display: flex;
  justify-content: center;
}

Alinea al inicio

.grupo-de-elementos {
  display: flex;
  justify-content: flex-start;
}

Alinea al final

.grupo-de-elementos {
  display: flex;
  justify-content: flex-end;
}

space-between

El primero y el último elemento se pega a los laterales, el resto del espacio se distribuye

.grupo-de-elementos {
  display: flex;
  justify-content: space-between;
}

space-around

Usa un mismo espacio alrededor de cada elemento

.grupo-de-elementos {
  display: flex;
  justify-content: space-around;
}

space-evenly

El espacio se distribuye en cada elemento de forma uniforme.

.grupo-de-elementos {
  display: flex;
  justify-content: space-evenly;
}

Más información

align-items

Gestiona la alineación en el eje contrario.

Alinea al centro

.grupo-de-elementos {
  display: flex;
  align-items: center;
}

Alinea al inicio

.grupo-de-elementos {
  display: flex;
  align-items: flex-start;
}

Alinea al final

.grupo-de-elementos {
  display: flex;
  align-items: flex-end;
}

Existe un tipo de alineación para altura irregulares llamado baseline que ajusta la línea base. Puedes evitar la complejidad de utilizarlo con una buena maquetación.

Más información

flex-grow

Simplifica los tamaños relativos de los elementos.

.grupo-de-elementos {
  display: flex;
}

.primer-elemento {
  flex-grow: 1;
}

.grupo-de-elementos {
  display: flex;
}

.todos-los-elemento {
  flex-grow: 1;
}

.grupo-de-elementos {
  display: flex;
}

.todos-los-elemento {
  flex-grow: 1;
}

.corazon {
  flex-grow: 3;
}

Más información

flex-basis

Indica el tamaño inicial del elemento cuando se usa flex-grow. Muy útil para evitar que un elemento crezca demasiado.

En el siguiente ejemplo, la carta de ❤️ ocupa el mismo espacio que el resto de cartas, pero no crece más allá de 200px.

.grupo-de-elementos {
  display: flex;
}

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-basis: 200px;
}

Más información

flex-shrink

Indica su grado de flexibilidad, siendo 0 el valor por defecto. Sus valores son: 0, 1 y n. Siendo n el factor de encogimiento.

Debes usarlo junto a flex-grow y flex-basis.

Flexibilidad 0

No se encoge, aunque el resto de elementos se encogen.

.grupo-de-elementos {
  display: flex;
}

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-shrink: 0;
  flex-basis: 200px;
}

Flexibilidad 1

Se encoge al mismo ritmo que el resto de elementos.

.grupo-de-elementos {
  display: flex;
}

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-shrink: 1;
  flex-basis: 200px;
}

Flexibilidad n

Se encoge más que el resto de elementos. En este caso, el elemento se encoge el doble que el resto de elementos. Cuanto mayor sea el valor, más se encogerá.

.grupo-de-elementos {
  display: flex;
}

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-shrink: 2;
  flex-basis: 200px;
}

Más información

align-self

Da a un elemento una alineación diferente en el eje contrario.

center

Alinea al centro.

.grupo-de-elementos {
  display: flex;
  align-items: flex-start;
}

.elemento-segundo {
  align-self: center;
}

flex-start

Alinea al inicio.

.grupo-de-elementos {
  display: flex;
  align-items: flex-end;
}

.elemento-segundo {
  align-self: flex-start;
}

flex-end

Alinea al final.

.grupo-de-elementos {
  display: flex;
  align-items: flex-start;
}

.elemento-segundo {
  align-self: flex-end;
}

Más información

order

Decide el orden de cada elemento.

.grupo-de-elementos {
  display: flex;
}

.elemento-diamantes {
  order: 1;
}

.elemento-corazones {
  order: 2;
}

.elemento-trebol {
  order: 3;
}

.elemento-picas {
  order: 4;
}

gap

Añade espacio entre los elementos.

No confundir con padding.

.grupo-de-elementos {
  display: flex;
  gap: 0;
}

.grupo-de-elementos {
  display: flex;
  gap: 2rem;
}

Más información

Apuntes finales

A pesar de toda la versatilidad que nos ofrece Flex, no es una solución para todo tipo de diseños. Cuando necesitemos libertad de maquetación, como elementos que no siguen un solo eje (2 dimensiones), Flex se volverá un estorbo más que una ayuda. Para estos casos creativos, montaremos un sistema de cuadrícula que aprenderemos en la siguiente lección.

¿Me ayudas?

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario