Ejercicio: Flexbox

Objetivo

Maquetar una cabecera, una fila de tarjetas de igual altura y un bloque centrado usando solo Flexbox.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

<header class="cabecera">
  <a class="logo" href="#">Mi sitio</a>
  <nav class="menu">
    <a href="#">Inicio</a>
    <a href="#">Cursos</a>
    <a href="#">Blog</a>
    <a href="#">Contacto</a>
  </nav>
  <a class="cta" href="#">Entrar</a>
</header>
<section class="tarjetas">
  <article class="tarjeta"><h3>Uno</h3><p>Texto corto.</p></article>
  <article class="tarjeta"><h3>Dos</h3><p>Un texto bastante más largo para comprobar que todas las tarjetas conservan la misma altura.</p></article>
  <article class="tarjeta"><h3>Tres</h3><p>Texto medio de ejemplo.</p></article>
</section>
<div class="centro"><p>Centrado</p></div>

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Escribe *, *::before, *::after { box-sizing: border-box; } y body { margin: 0; font-family: system-ui, sans-serif; }.
• Convierte .cabecera en un contenedor flex: display: flex, align-items: center, gap: 16px, padding: 12px 20px.
• Haz que .menu también sea flex con gap: 14px y empújalo al lado derecho con margin-left: auto.
• Haz que .tarjetas sea flex con gap: 16px y flex-wrap: wrap, con padding: 20px.
• Haz que cada .tarjeta use flex: 1 1 200px, con borde 1px solid #dde2ef, border-radius: 12px y padding: 16px.
• Comprueba que las tres tarjetas tienen la misma altura (no escribas ninguna altura).
• Centra el contenido de .centro en horizontal y vertical con flexbox, con min-height: 160px.

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }

.cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
}

.menu {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
}

.tarjeta {
  flex: 1 1 200px;
  border: 1px solid #dde2ef;
  border-radius: 12px;
  padding: 16px;
}

.centro {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}