Flexbox Básico: Maquetación en una Dimensión

Si HTML es el **esqueleto** de tu página web, **CSS** es la piel, la ropa, el maquillaje y la decoración. CSS (Cascading Style Sheets, Hojas de Estilo en Cascada) es el lenguaje que usamos para **estilizar** tus documentos HTML, controlando su apariencia, diseño y cómo se presentan en diferentes dispositivos.

Piensa en CSS como la parte del diseño de una casa: elige los colores de las paredes, el tipo de muebles, cómo se distribuyen las habitaciones y qué tan grandes son las ventanas.

1. El Concepto de Contenedor y Elementos Flex

Flexbox trabaja con un concepto simple pero fundamental:

• Contenedor Flex (Flex Container): Es el elemento padre al que le aplicas la propiedad display: flex;. Este contenedor se convierte en un «contexto flex» y sus hijos directos se convierten en «elementos flex».

  .contenedor-principal {
      display: flex; /* ¡Esto es lo esencial! */
  }

• Elementos Flex (Flex Items): Son los hijos directos del contenedor flex. Estos elementos son los que se organizarán y comportarán según las propiedades Flexbox que apliques al contenedor y, en algunos casos, a los propios ítems.

  <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
  </div>

2. Propiedades del Contenedor Flex

La mayoría del control de Flexbox se aplica al **contenedor flex**.

a. flex-direction: Dirección del Eje Principal

Define la dirección en la que los elementos flex se colocarán en el contenedor.

• row (por defecto): De izquierda a derecha (o derecha a izquierda en RTL).
• row-reverse: De derecha a izquierda.
• column: De arriba abajo.
• column-reverse: De abajo arriba.

.flex-container {
    display: flex;
    flex-direction: column; /* Los ítems se apilarán verticalmente */
}

b. justify-content: Alineación en el Eje Principal

Controla cómo se distribuyen los elementos flex a lo largo del eje principal (el que define flex-direction).

• flex-start (por defecto): Los ítems se agrupan al inicio del eje.
• flex-end: Los ítems se agrupan al final del eje.
• center: Los ítems se centran en el eje.
• space-between: El primer y último ítem se pegan a los bordes, y el espacio restante se distribuye uniformemente entre los ítems.
• space-around: El espacio se distribuye uniformemente alrededor de cada ítem (los extremos tienen la mitad del espacio que hay entre ítems).
• space-evenly: El espacio se distribuye uniformemente entre los ítems Y al inicio/final del contenedor.

.flex-container {
    display: flex;
    justify-content: center; /* Centra los ítems horizontalmente (si direction es row) */
}

c. align-items: Alineación en el Eje Transversal (Cruzado)

Controla cómo se alinean los elementos flex a lo largo del eje transversal (perpendicular al eje principal).

• stretch (por defecto): Los ítems se estiran para llenar el contenedor (si no tienen un alto definido).
• flex-start: Los ítems se alinean al inicio del eje transversal.
• flex-end: Los ítems se alinean al final del eje transversal.
• center: Los ítems se centran en el eje transversal.
• baseline: Los ítems se alinean según sus líneas base de texto.

.flex-container {
    display: flex;
    align-items: center; /* Centra los ítems verticalmente (si direction es row) */
}

d. flex-wrap: Salto de Línea

Controla si los elementos flex deben ajustarse (saltar a una nueva línea) si no caben en una sola línea del contenedor.

• nowrap (por defecto): Todos los ítems intentan mantenerse en una sola línea, encogiéndose si es necesario.
• wrap: Los ítems saltan a la siguiente línea si no hay espacio.
• wrap-reverse: Los ítems saltan a la línea anterior (dirección inversa).

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los ítems salten a la siguiente fila */
}

3. Propiedades de los Elementos Flex (Items)

Aunque la mayoría de las propiedades se aplican al contenedor, también puedes controlar el comportamiento individual de los elementos flex.

a. flex-grow: Permitir Crecer

Define la capacidad de un elemento para crecer si hay espacio disponible en el contenedor. Un valor de 1 (o más) permite que crezca; 0 (por defecto) no lo permite.

.flex-item-grow {
    flex-grow: 1; /* Este ítem ocupará el espacio restante */
}

b. flex-shrink: Permitir Encoger

Define la capacidad de un elemento para encogerse si no hay suficiente espacio en el contenedor. Un valor de 1 (por defecto) permite que se encoja; 0 no lo permite.

.flex-item-no-shrink {
    flex-shrink: 0; /* Este ítem no se encogerá */
}

c. flex-basis: Tamaño Base

Define el tamaño inicial de un elemento flex antes de que se distribuya el espacio restante. Puede ser un valor en píxeles, porcentaje, etc. (ej. 100px, 50%, auto).

.flex-item-half {
    flex-basis: 50%; /* Intentará ocupar la mitad del contenedor */
}

La propiedad abreviada flex combina flex-grow, flex-shrink y flex-basis (ej. flex: 1 1 auto;).

d. order: Reordenar Items

Controla el orden visual de los elementos flex, independientemente de su orden en el HTML. Un valor numérico; los ítems con un número más bajo aparecen primero. Por defecto es 0.

.flex-item-first {
    order: -1; /* Aparecerá primero */
}
.flex-item-last {
    order: 1; /* Aparecerá al final */
}

e. align-self: Alineación Individual en el Eje Transversal

Permite sobrescribir la propiedad align-items del contenedor para un elemento flex individual.

.flex-item-center {
    align-self: center; /* Este ítem se centrará verticalmente, independientemente del contenedor */
}

.flex-container {
    display: flex;
    justify-content: center;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-item.flex-grow-1 {
    flex-grow: 1;
}
.flex-item.order-minus-1 {
    order: -1;
}

¡Flexbox es una herramienta increíblemente versátil! Con estas propiedades, puedes crear diseños complejos para componentes individuales o secciones de tu página. Practica cambiando los valores y observa cómo los ítems se reorganizan.

Practica

Replica el siguiente ejemplo usando lo aprendido hasta ahora.
Es recomendable hacer la practica en una computadora de escritorio.
Observa que al cambiar el tamaño de la pantalla algunos elementos se ajustan.