Clase 07 · Flexbox parte 1
Estos apuntes siguen la séptima clase de Edición Web I: cómo funciona Flexbox, el sistema de maquetación para colocar elementos en una sola dimensión (filas o columnas). Verás display: flex, justify-content, flex-wrap, gap y flex-grow, con ejemplos y ejercicios. El código de cada ejemplo es el mismo que se mostró en clase.
Flexbox · display: flex;
Flexbox es un sistema de maquetación especialmente apropiado para hacer estructuras de una sola dimensión (filas o columnas, en lugar de una rejilla de elementos).
.container {
display: flex;
}Flex ocupará todo el ancho del padre. Con display: flex; conseguimos que cualquier elemento, incluyendo los contenedores <div>, se pongan en línea, uno al lado del otro.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<style>
div {
border: 1px solid black;
padding: 5px;
}
.probando-flex {
background-color: greenyellow;
display: flex;
}
</style>
<body>
<div class="container">
<h1>Contenedor principal</h1>
<div class="probando-flex">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>
</div>
</body>
</html>Contenedor principal
Sin display: flex, los <div> (elementos en bloque) se apilarían uno debajo de otro. Con flex, los hijos directos del contenedor pasan a colocarse en una fila.
justify-content
Alineación de los elementos horizontalmente.
.contenedor{
display:flex;
justify-content:space-around;
}
flex-wrap
- wrap: los elementos de la capa se distribuirán en una o varias filas en función de su tamaño.
- nowrap: los elementos de la capa estarán sí o sí en una sola fila.
.container-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container-no-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}flex-wrap: wrap;
<style>
div {
border: 1px solid black;
padding: 5px;
}
.container-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>
<body>
<div class="container-wrap">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<div>Elemento 4</div>
<div>Elemento 5</div>
<div>Elemento 6</div>
<div>Elemento 7</div>
</div>
</body>flex-wrap: nowrap;
<style>
div {
border: 1px solid black;
padding: 5px;
}
.container-no-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
</style>
<body>
<div class="container-no-wrap">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<div>Elemento 4</div>
<div>Elemento 5</div>
<div>Elemento 6</div>
<div>Elemento 7</div>
</div>
</body>Con nowrap todos los elementos se quedan en una sola fila: el navegador los comprime para que quepan, en lugar de pasarlos a otra línea.
flex-wrap: wrap-reverse;
Invierte el orden en que mostramos los elementos.
.container-wrap-reverse {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}gap
gap: 8px; — espacio entre elementos. Si utilizamos justify-content: flex-start; todos los elementos estarían pegados; con gap creamos un espacio de 8px entre cada elemento.
.container-no-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
}gap: 8px
Sin gap
Grow
Grow es una forma de asignar tamaño horizontal de forma flexible, por lo que asignaremos la propiedad flex-grow al elemento hijo y no al contenedor. También se puede utilizar solo flex: 1;
.contenedor{
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item{flex-grow: 1;}flex-grow: 1; · Factor de crecimiento
Es un valor proporcional al ancho de pantalla: sería como si lo definiéramos por fracciones.
Sin factor de crecimiento
Factor de crecimiento solo al primer elemento
Mismo factor de crecimiento
Diferente factor de crecimiento
Ejemplo 1
Centrar 3 contenedores hijo con una imagen cada uno de ellos:
.contenedor-padre{
display:flex;
justify-content:center;
border:1px solid black;
padding:8px;
}
.contenedor{
width:800px;
display:flex;
justify-content:center;
gap:8px;
padding:8px;
background-color:gray;
}<div class="contenedor-padre">
<div class="contenedor">
<div><img src="https://picsum.photos/200/300?random=1"></div>
<div><img src="https://picsum.photos/200/300?random=2"></div>
<div><img src="https://picsum.photos/200/300?random=3"></div>
</div>
<div>Hay dos contenedores flex anidados: el padre centra al .contenedor y el .contenedor centra sus tres imágenes.
Ejemplo 2: barra de navegación
Una barra con un logo a la izquierda, tres botones centrados y tres iconos a la derecha, todo con display: flex y justify-content: space-between.
<nav>
<div>
<img class="logo" src="https://picsum.photos/100/100/?blur">
</div>
<div class="botones">
<a href="" class="link">Boton 1</a>
<a href="" class="link">Boton 2</a>
<a href="" class="link">Boton 3</a>
</div>
<div>
<a href=""><img class="logo" src="https://picsum.photos/100/100/?blur"></a>
<a href=""><img class="logo" src="https://picsum.photos/100/100/?blur"></a>
<a href=""><img class="logo" src="https://picsum.photos/100/100/?blur"></a>
</div>
</nav>nav{
display:flex;
justify-content:space-between;
Background-color:gray;
padding:16px;
margin:6px;
border-radius:8px;
}
.logo{
border-radius:500px;
width:30px;
}
.botones{
background-color:rgba(255,255,255,0.4);
padding:16px;
border-radius:8px;
display:flex;
}
.link{
font-size:18px;
color:white;
text-decoration:none;
border:2px solid white;
border-radius:24px;
padding: 6px 16px;
}Ejemplo 3: dado en CSS
Un dado con la cara del 5 hecho solo con flex: el contenedor tiene tres filas (display: flex) y cada fila alinea sus puntos con un justify-content distinto.
/* Contenedor del dado */
display: flex;
width: 33%;
/* Fila superior y fila inferior */
display: flex;
justify-content: space-between;
/* Fila central */
display: flex;
justify-content: center;
/* Cada punto */
width: 120px;
height: 120px;
background-color: black;
border-radius: 500px;
padding: 8px;En el demo los puntos se reducen para que el dado quepa en la página; en clase miden 120px.
Resumen propiedades flex
| Propiedad | Qué hace |
|---|---|
display: flex; | Permite colocar los elementos en el eje horizontal. |
justify-content | Diferentes alineaciones de los elementos. |
flex-wrap | Los elementos se sitúan en una o varias líneas. |
gap | Espacio entre los elementos. |
flex-grow | Asignación de anchura flexible o relativa. |
Recordatorio importante
Las propiedades flex se aplican al contenedor padre… NO a los elementos que queremos alinear. La excepción es flex-grow, que va en el hijo.
<div> <!-- Padre: aquí va el código flex -->
<div>hijo 1</div> <!-- Hijo -->
<div>hijo 2</div> <!-- Hijo -->
</div>Wireframe
Un wireframe es un esquema en blanco y negro de la estructura de una página: dónde va cada bloque (cabecera, imágenes, textos, botones…) antes de programarla. Nos ayuda a ver qué contenedores necesitamos y dónde aplicar flex.
Ejemplo: de la web al wireframe
En la diapositiva, cada bloque del wireframe se anota con el flex que necesita:
- Bloques con el contenido centrado:
display: flex;+justify-content: center; - Bloque con una rejilla de imágenes que salta de fila:
flex-wrap: wrap;
Ejercicio 1 · Ordenando cajas
Tenemos que probar las propiedades de justify-content.
- Crearemos una clase
.boxque será de 100 de alto y 100 de ancho. - Dentro de un padre meteremos tantas cajas como vemos en la imagen.
- Entre cada padre añadiremos un
<hr>. - La carpeta se llamará
ordenando_cajas.
Ejercicio 2 · Crear un wireframe
Crea la estructura de la página «wireframe»: puedes utilizar un programa de diseño o hacerlo a mano.
Ejercicio 3 · Crear un wireframe (portfolio)
La carpeta se llamará portfolio. Buscaremos 3 o 4 imágenes de la temática que queramos (preferiblemente trabajos vuestros) de un tamaño de 800×420.
Ayuda
