10.1 Columnas adaptables
Flexbox está diseñado para composiciones unidimensionales, lo que significa que es perfecto para organizar elementos en una fila o columna. Vamos a ver los conceptos básicos de Flexbox, así como técnicas para crear diseños complejos y adaptables.
Contenedor Flex y Elementos Flex
-
Contenedor Flex: un elemento al que se le aplica la propiedad
display: flex. Este contenedor controla la disposición de todos los elementos hijos (elementos flex) - Elementos Flex: elementos hijos del contenedor flex
1. Creación de columnas adaptables
Ejemplo de creación de columnas adaptables usando flex-wrap, flex-grow,
flex-shrink y flex-basis:
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Columnas adaptables con Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">Columna 1</div>
<div class="flex-item">Columna 2</div>
<div class="flex-item">Columna 3</div>
</div>
</body>
</html>
Explicación del código:
-
.flex-container: define el contenedor como un contenedor flex con elementos que pueden pasar a la siguiente fila si no hay suficiente espacio (flex-wrap: wrap) -
.flex-item: los elementos tienen tamaños iguales y pueden adaptarse al espacio disponible (flex: 1 1 200px)
10.2 Galería de imágenes adaptable
Crearemos una galería de imágenes adaptable que cambia el número de columnas según el tamaño de la pantalla:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 5">
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
</body>
</html>
Explicación:
- En pantallas grandes, las imágenes ocupan un tercio del ancho del contenedor
- En pantallas de hasta 768 píxeles de ancho, las imágenes ocupan la mitad del ancho del contenedor
- En pantallas de hasta 480 píxeles de ancho, las imágenes ocupan todo el ancho del contenedor
10.3 Diseño adaptativo complejo con Flexbox
Crearemos un diseño complejo usando Flexbox que incluye cabecera, barra lateral, contenido principal y pie de página, adaptándose a diferentes tamaños de pantalla:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Flexbox Layout</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
aside {
background-color: #ccc;
padding: 20px;
}
@media (min-width: 768px) {
main {
flex-direction: row;
}
.content {
flex: 3;
}
aside {
flex: 1;
}
}
</style>
</head>
<body>
<header>Header</header>
<main>
<aside>Sidebar</aside>
<div class="content">Main Content</div>
</main>
<footer>Footer</footer>
</body>
</html>
Explicación:
- En pantallas pequeñas, el diseño consiste en encabezado, contenido principal, barra lateral y pie de página ubicados verticalmente
- En pantallas de 768 píxeles de ancho y más, el contenido principal y la barra lateral se ubican horizontalmente
GO TO FULL VERSION