Creo miniproyecto flexbox5
Aquí tienes un ejemplo en HTML con CSS integrado que utiliza Flexbox para apilar secciones verticalmente con espacios definidos entre ellas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Flexbox con Espacios Verticales</title>
<style>
/* Estilo general del cuerpo */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex; /* Flexbox para que el contenedor ocupe todo el alto */
justify-content: center; /* Centrar horizontalmente el contenedor */
align-items: center; /* Centrar verticalmente el contenedor */
height: 100vh; /* Ocupa toda la altura de la ventana */
}
/* Contenedor principal que usa Flexbox */
.contenedor {
display: flex; /* Activa Flexbox */
flex-direction: column; /* Apila las secciones verticalmente */
gap: 20px; /* Espacio entre las secciones */
width: 80%; /* Ocupa el 80% del ancho de la ventana */
max-width: 800px; /* Limita el ancho máximo */
}
/* Estilo para cada sección */
.seccion {
padding: 20px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar las secciones */
}
</style>
</head>
<body>
<!-- Contenedor principal -->
<div class="contenedor">
<!-- Sección 1 -->
<div class="seccion">
<h2>Sección 1</h2>
<p>Este es el contenido de la primera sección.</p>
</div>
<!-- Sección 2 -->
<div class="seccion">
<h2>Sección 2</h2>
<p>Este es el contenido de la segunda sección.</p>
</div>
<!-- Sección 3 -->
<div class="seccion">
<h2>Sección 3</h2>
<p>Este es el contenido de la tercera sección.</p>
</div>
</div>
</body>
</html>
Descripción del código:
1. Estructura del contenedor principal:
El <div class="contenedor"> actúa como el contenedor principal que organiza las secciones verticalmente.
Usamos display: flex para activar Flexbox, y flex-direction: column para apilar los elementos en columnas.
El gap: 20px define el espacio vertical entre cada sección.
2. Estilo de las secciones:
Cada <div class="seccion"> representa una sección individual.
Tienen un fondo blanco, bordes redondeados (border-radius), y sombra para destacar visualmente cada sección.
3. Responsividad:
El ancho del contenedor está limitado al 80% del ancho de la ventana (width: 80%) con un máximo de 800px (max-width: 800px), para que no se desborde en pantallas grandes.
4. Centrado del contenedor:
El body utiliza Flexbox para centrar el contenedor tanto horizontal como verticalmente en la ventana.
Este diseño es simple, limpio y adaptable a diferentes dispositivos.
Comentarios
Publicar un comentario