Guía Completa de CSS Flexbox: Aprende a Diseñar con Flexibilidad

---

.contenedor {
display: flex; /* Activa flexbox */
}

.contenedor {
flex-direction: row; /* Elementos en línea horizontal */
}

.contenedor {
justify-content: center; /* Centrado */
justify-content: space-between; /* Distribuye espacios */
justify-content: space-around; /* Espacios proporcionales */
justify-content: flex-start; /* Inicio */
justify-content: flex-end; /* Final */
}

.contenedor {
align-items: center; /* Centrado verticalmente */
align-items: stretch; /* Estira elementos */
align-items: flex-start; /* Alineación superior */
align-items: flex-end; /* Alineación inferior */
}

<div class="menu">
<div class="item">Inicio</div>
<div class="item">Productos</div>
<div class="item">Contacto</div>
</div>

.menu {
display: flex;
justify-content: space-around;
background-color: #333;
color: white;
}

.item {
padding: 10px;
cursor: pointer;
}

<div class="tarjetas">
<div class="tarjeta">Tarjeta 1</div>
<div class="tarjeta">Tarjeta 2</div>
<div class="tarjeta">Tarjeta 3</div>
</div>

.tarjetas {
display: flex;
gap: 20px; /* Espacio entre elementos */
flex-wrap: wrap; /* Ajuste automático */
}

.tarjeta {
flex: 1; /* Distribución proporcional */
background-color: #f0f0f0;
padding: 20px;
}

<div class="contenedor-centrado">
<div class="elemento-centrado">Centrado</div>
</div>

.contenedor-centrado {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #e0e0e0;
}

.item {
flex-grow: 1; /* Crece proporcionalmente */
}

.item {
flex-shrink: 0; /* Evita reducción */
}

.item {
flex-basis: 200px; /* Tamaño base */
}

<div class="layout">
<header>Header</header>
<nav>Menú</nav>
<main>Contenido Principal</main>
<footer>Footer</footer>
</div>

.layout {
display: flex;
flex-direction: column;
height: 100vh;
}

header, footer {
flex: 0 0 60px;
}

.layout {
display: flex;
}

nav {
flex: 0 0 200px;
}

main {
flex: 1;
}