Lección 22: Flex

A la hora de maquetar disponemos de una herramienta muy poderosa llamada Flex. Controlaremos un grupo de elementos en una dimensión: vertical u horizontal.

.grupo-de-elementos {
  display: flex;
}
<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

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;
}

.segundo-elemento {
  flex-grow: 3;
}

Más información

flex-basis

Indica el tamaño inicial del elemento.

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

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-grow: 1;
  flex-basis: 20rem;
}

Más información

flex-shrink

Indica su grado de flexibilidad, siendo 0 como ninguno y 1 en adelante más flexible. Debes usarlo junto a flex-grow y flex-basis.

Con flexibilidad

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

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 20rem;
}

Sin flexibilidad

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

.elementos {
  flex-grow: 1;
}

.segundo-elemento {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 20rem;
}

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;
}

grid-gap

Añade espacio entre los elementos. Con confundir con padding.

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

Más información

22-1 22-2 22-3 22-4 22-5

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario