Flexbox Básico

Flexbox (Flexible Box Layout) es un módulo de CSS diseñado para facilitar la creación de diseños flexibles y adaptativos en el diseño web. Proporciona una forma eficiente de distribuir el espacio entre elementos y alinear contenido en contenedores, incluso cuando su tamaño es desconocido o dinámico. A continuación, se presentan los conceptos básicos para empezar a usar Flexbox.

1. Contenedor Flex

Para usar Flexbox, primero debes definir un contenedor flex. Esto se hace aplicando la propiedad display: flex o display: inline-flex a un elemento contenedor.

display: flex: El contenedor se comporta como un bloque.
display: inline-flex: El contenedor se comporta como un elemento en línea.
Ejemplo de código:

.contenedor-flex {
    display: flex;
    /* O display: inline-flex; */
}

2. Direcciones del Eje

Flexbox organiza los elementos a lo largo de dos ejes:

Eje principal: Por defecto, es el eje horizontal. Los elementos se alinean a lo largo de este eje.
Eje transversal: Perpendicular al eje principal. Los elementos se alinean a lo largo de este eje.

Puedes cambiar la dirección del eje principal usando la propiedad flex-direction.

Valores comunes:
- row: Eje principal horizontal (valor por defecto).
- column: Eje principal vertical.
- row-reverse: Eje principal horizontal invertido.
- column-reverse: Eje principal vertical invertido.
Ejemplo de código:

.contenedor-flex {
    display: flex;
    flex-direction: row; /* O column, row-reverse, column-reverse */
}

3. Alineación de Elementos

Flexbox proporciona varias propiedades para alinear y distribuir elementos a lo largo del eje principal y el eje transversal.

Alineación en el eje principal (con justify-content):
- flex-start: Alinea al inicio del contenedor.
- flex-end: Alinea al final del contenedor.
- center: Centra los elementos en el contenedor.
- space-between: Distribuye el espacio entre los elementos, sin espacio en los extremos.
- space-around: Distribuye el espacio alrededor de los elementos, con espacio igual en los extremos.
Alineación en el eje transversal (con align-items):
- flex-start: Alinea al inicio del eje transversal.
- flex-end: Alinea al final del eje transversal.
- center: Centra los elementos en el eje transversal.
- baseline: Alinea los elementos según la línea base del texto.
- stretch: Estira los elementos para llenar el contenedor (valor por defecto).
Ejemplo de código:

.contenedor-flex {
    display: flex;
    justify-content: center; /* Alineación en el eje principal */
    align-items: center; /* Alineación en el eje transversal */
}

4. Orden y Flexibilidad de los Elementos

Los elementos flexibles pueden ser ordenados y pueden crecer o encogerse según el espacio disponible.

Orden (con order): Cambia el orden de los elementos sin modificar el HTML.
- Valores: Enteros (e.g., order: 1;).
Flexibilidad (con flex): Controla cómo los elementos crecen y se reducen.
- Sintaxis: flex: [flex-grow] [flex-shrink] [flex-basis]
- Valores comunes:
  - flex-grow: Proporción en que el elemento puede crecer.
  - flex-shrink: Proporción en que el elemento puede reducirse.
  - flex-basis: Tamaño inicial del elemento antes de que se apliquen flex-grow o flex-shrink.
Ejemplo de código:

.elemento-flex {
    flex: 1; /* El elemento crecerá para llenar el espacio disponible */
    order: 2; /* Cambia el orden del elemento */
}

5. Ejemplo Completo

Aquí tienes un ejemplo completo que muestra cómo usar Flexbox para crear un diseño básico de una fila con elementos centrados y distribuidos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Flexbox</title>
    <style>
        .contenedor-flex {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        
        .elemento-flex {
            flex: 1;
            margin: 10px;
            padding: 20px;
            background-color: lightblue;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="contenedor-flex">
        <div class="elemento-flex">Elemento 1</div>
        <div class="elemento-flex">Elemento 2</div>
        <div class="elemento-flex">Elemento 3</div>
    </div>
</body>
</html>