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;
}
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;
}
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;
}
¿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.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios