Lección 4: Flex | Curso de Maquetación Web

Lección 4: 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;
}

gap

Añade espacio entre los elementos maquetados con Flex o Grid. Con confundir con padding.

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

Más información

Actividad 1

A partir del siguiente modelo, crea tu propia web de presentación que vincule a tus aficiones o redes sociales.

Previa actividad 22-1

Actividad 2

A partir del siguiente modelo, crea un espacio para enseñar cuales son tus 4 principales habilidades digitales.

Previa actividad 22-2

Actividad 3

A partir del siguiente modelo, crea tu propia agenda que además te informe del tiempo.

Previa actividad 22-3

Actividad 4

A partir del siguiente modelo, crea una copia de WhatsApp.

Previa actividad 22-4

Si te animas, puedes darle tu propia personalidad. ¿Cómo sería el WhatsApp de los princesas Disney?

Previa actividad 22-4 alternativa

Actividad 5

A partir del siguiente modelo, crea una tienda de flotadores.

Previa actividad 22-5

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario