🎯 Nivel 9 - Flexbox

📖 Aprende Flexbox

🎯 ¿Qué es Flexbox?

Flexbox es un sistema de diseño CSS que permite alinear y distribuir elementos de forma flexible. ¡Es perfecto para crear layouts modernos y responsivos!

💡 Para usar Flexbox

Solo necesitas agregar display: flex; al contenedor padre. ¡Los elementos hijos se convierten en "flex items"!

🧭 Propiedades del Contenedor:

➡️

flex-direction

↔️

justify-content

↕️

align-items

🔄

flex-wrap

📏

gap

📌 justify-content (eje horizontal):

flex-start - Al inicio
center - Al centro
flex-end - Al final
space-between - Espacio entre elementos
space-around - Espacio alrededor
space-evenly - Espacio igual

📌 align-items (eje vertical):

flex-start - Arriba
center - Centro vertical
flex-end - Abajo
stretch - Estirar (default)

💻 Editor Flexbox

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Flexbox Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #1e1b4b, #312e81);
            min-height: 100vh;
            padding: 20px;
            margin: 0;
        }
        
        h1 {
            color: white;
            text-align: center;
        }
        
        /* 🎯 Contenedor Flex */
        .contenedor-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            
            background: rgba(255,255,255,0.1);
            border: 3px dashed #8b5cf6;
            border-radius: 15px;
            padding: 30px;
            min-height: 200px;
            margin: 20px auto;
            max-width: 800px;
        }
        
        /* 📦 Items Flex */
        .item {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
            color: white;
            padding: 25px 35px;
            border-radius: 12px;
            font-weight: bold;
            font-size: 1.3rem;
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
            transition: transform 0.3s;
        }
        
        .item:hover {
            transform: scale(1.1) rotate(5deg);
        }
        
        /* 🔄 Ejemplo de dirección columna */
        .flex-columna {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            
            background: rgba(255,255,255,0.1);
            border: 3px dashed #10b981;
            border-radius: 15px;
            padding: 20px;
            max-width: 300px;
            margin: 20px auto;
        }
        
        .item-verde {
            background: linear-gradient(135deg, #10b981, #34d399);
            color: white;
            padding: 15px 30px;
            border-radius: 10px;
            font-weight: bold;
            width: 80%;
            text-align: center;
        }
        
        /* 🎨 Ejemplo space-between */
        .flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            background: rgba(255,255,255,0.1);
            border: 3px dashed #f59e0b;
            border-radius: 15px;
            padding: 20px;
            max-width: 600px;
            margin: 20px auto;
        }
        
        .item-naranja {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: #333;
            padding: 15px 25px;
            border-radius: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>🎯 Flexbox en Acción</h1>
    
    <div class="contenedor-flex">
        <div class="item">🌟 Item 1</div>
        <div class="item">🚀 Item 2</div>
        <div class="item">💎 Item 3</div>
    </div>
    
    <h1>📦 Flex Direction: Column</h1>
    
    <div class="flex-columna">
        <div class="item-verde">Arriba</div>
        <div class="item-verde">Centro</div>
        <div class="item-verde">Abajo</div>
    </div>
    
    <h1>↔️ Justify: Space-Between</h1>
    
    <div class="flex-between">
        <div class="item-naranja">Izquierda</div>
        <div class="item-naranja">Centro</div>
        <div class="item-naranja">Derecha</div>
    </div>
</body>
</html>

👁️ Vista Previa

Flexbox - Diseño Flexible

🎯 ¿Qué es Flexbox?

💡 Para usar Flexbox

🧭 Propiedades del Contenedor:

📌 justify-content (eje horizontal):

📌 align-items (eje vertical):

🎛️ Controles Flex

1. ¿Qué propiedad activa Flexbox en un contenedor?

2. ¿Qué propiedad centra elementos horizontalmente?

3. ¿Qué valor de justify-content pone espacio igual entre elementos?