Ejercicio 3: Flexbox Básico

🎯 ¿Qué es Flexbox?

Flexbox es un modelo de diseño unidimensional que permite distribuir elementos de manera flexible dentro de un contenedor. Es perfecto para crear layouts que se adaptan a diferentes tamaños de pantalla.

📦 Contenedor Flex

El elemento padre que contiene los elementos flex

display: flex;

🎯 Elementos Flex

Los hijos directos del contenedor flex

flex-items

📐 Eje Principal

La dirección en la que se distribuyen los elementos

flex-direction

1. Display: Flex

Convierte un contenedor en un contenedor flex. Los elementos hijos se distribuyen automáticamente.

Sin Flexbox:

Elemento 1

Elemento 2

Elemento 3

Con Flexbox:

Elemento 1

Elemento 2

Elemento 3

Código CSS:

.container-flex {
    display: flex;
    border: 2px dashed #667eea;
    padding: 1rem;
    background: #f8f9fa;
}

2. Flex Direction

Controla la dirección del eje principal (horizontal o vertical).

Row (por defecto - horizontal):

Column (vertical):

Row Reverse (horizontal invertido):

Column Reverse (vertical invertido):

Código CSS:

.flex-container {
    display: flex;
    border: 2px dashed #667eea;
    padding: 1rem;
    background: #f8f9fa;
    margin: 1rem 0;
}

.row {
    flex-direction: row; /* por defecto */
}

.column {
    flex-direction: column;
    min-height: 200px;
}

.row-reverse {
    flex-direction: row-reverse;
}

.column-reverse {
    flex-direction: column-reverse;
    min-height: 200px;
}

3. Justify Content

Alinea elementos en el eje principal (horizontal por defecto).

Flex Start (por defecto):

Center:

Flex End:

Space Between:

Space Around:

Space Evenly:

Código CSS:

.justify-start {
    justify-content: flex-start; /* por defecto */
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

4. Align Items

Alinea elementos en el eje transversal (vertical por defecto).

Stretch (por defecto):

2 (Alto)

Flex Start:

2 (Alto)

Center:

2 (Alto)

Flex End:

2 (Alto)

Baseline:

2 (Alto)

Código CSS:

.align-stretch {
    align-items: stretch; /* por defecto */
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.align-baseline {
    align-items: baseline;
}

.flex-item.tall {
    min-height: 100px;
}

5. Centrado Perfecto con Flexbox

La forma más fácil de centrar elementos tanto horizontal como verticalmente.

Centrado Perfecto

Este elemento está perfectamente centrado usando flexbox

Código CSS:

.perfect-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
}

.centered-content {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

6. Flex Wrap

Controla si los elementos se envuelven a la siguiente línea cuando no hay espacio suficiente.

No Wrap (por defecto):

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Wrap:

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Wrap Reverse:

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Código CSS:

.no-wrap {
    flex-wrap: nowrap; /* por defecto */
}

.wrap {
    flex-wrap: wrap;
}

.wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-item.wide {
    min-width: 200px;
}

🎯 Ejercicio Práctico

Crea una barra de navegación responsive usando flexbox con los siguientes elementos:

Logo a la izquierda
Enlaces de navegación centrados
Botón de acción a la derecha
En móviles, los elementos se apilan verticalmente

Código CSS:

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 10px;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.action-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background: white;
    color: #667eea;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}