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;
}
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;
}
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;
}
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.
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;
}
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;
}
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;
}
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;
}
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;
}
Actividad 1
A partir del siguiente modelo, crea tu propia web de presentación que vincule a tus aficiones o redes sociales.
Actividad 2
A partir del siguiente modelo, crea un espacio para enseñar cuales son tus 4 principales habilidades digitales.
Actividad 3
A partir del siguiente modelo, crea tu propia agenda que además te informe del tiempo.
Actividad 4
A partir del siguiente modelo, crea una copia de WhatsApp.
Si te animas, puedes darle tu propia personalidad. ¿Cómo sería el WhatsApp de los princesas Disney?
Actividad 5
A partir del siguiente modelo, crea una tienda de flotadores.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 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.
- 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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios