Ejercicio 5 – Maquetación completa con Flexbox

📄 Objetivo

Maquetar una página web sencilla de una empresa ficticia utilizando exclusivamente Flexbox para la distribución de los elementos.

El reto consiste en no utilizar CSS Grid, ni float, ni posicionamiento absoluto para la estructura. Debemos dominar los conceptos de ejes, alineación, distribución y la propiedad flex compuesta.

💻 Estructura HTML

La estructura es semántica, dividiendo la página en Header, Main (con Sidebar y Sección de contenidos) y Footer.


<body>
    <header class="header">
        <div class="logo">LOGO</div>
        <nav class="menu">...</nav>
    </header>

    <main class="main">
        <aside class="sidebar">...</aside>
        <section class="contenido">
            <h2>Artículos</h2>
            <div class="cards">
                <article class="card">Artículo 1</article>
                <article class="card">Artículo 2</article>
                <article class="card">Artículo 3</article>
            </div>
        </section>
    </main>

    <footer class="footer">...</footer>
</body>

🎯 Claves de la solución

Sticky Footer: Usamos min-height: 100vh en el body y flex-direction: column. Al dar flex: 1 al elemento main, este ocupa todo el espacio sobrante empujando el footer abajo.
Sidebar Fija: Usamos flex: 0 0 250px para que la barra lateral no crezca ni encoja, manteniendo siempre sus 250px.
Cards Flexibles: Al dar flex: 1 a las cards, todas se reparten el ancho disponible equitativamente.

✅ Código CSS Completo


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
}
.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}
.menu {
    display: flex;
    gap: 20px;
}
.menu a {
    color: #fff;
    text-decoration: none;
}
.main {
    flex: 1; 
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: #f4f4f4;
}
.sidebar {
    flex: 0 0 250px; 
    background-color: #ddd;
    padding: 15px;
    border-radius: 5px;
}
.contenido {
    flex: 1;
}
.sidebar ul {
    list-style: none;
    margin-top: 10px;
}
.sidebar li {
    margin-bottom: 5px;
}
.cards {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}
.card {
    flex: 1;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
}
.footer {
    background-color: #222;
    color: #aaa;
    padding: 20px;
    border-top: 5px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

🔎 Ver resultado