GUÍA COMPLETA DE CSS FLEXBOX PARA DISEÑOS WEB

Introducción a CSS Flexbox

CSS Flexbox es un módulo de diseño que permite crear interfaces web flexibles y responsivas de manera eficiente. Este sistema organiza elementos HTML en contenedores flexibles, ofreciendo control sobre la disposición, alineación y tamaño de los ítems en una sola dimensión, ya sea en filas o columnas. A diferencia de los métodos tradicionales como floats o posicionamiento absoluto, Flexbox simplifica la creación de diseños complejos y adaptables a diferentes tamaños de pantalla. En esta guía, exploraremos las propiedades de contenedores y ítems, cómo centrar elementos y ejemplos prácticos para dominar esta herramienta esencial en el desarrollo web moderno.

¿Qué es Flexbox?

Flexbox, o el módulo de diseño de caja flexible, transforma elementos HTML en modelos de caja flexibles. Esto permite ajustar su tamaño y posición en una sola dimensión, ya sea una fila o una columna, pero no ambas simultáneamente. Para diseños bidimensionales, el módulo CSS Grid es más adecuado. Flexbox es ideal para alinear elementos en interfaces dinámicas, como barras de navegación o secciones responsivas.

section {
    display: flex;
    background-color: orange;
    margin: 10px;
    padding: 7px;
}

En el ejemplo anterior, el elemento <section> se convierte en un contenedor flexible, y sus hijos directos se transforman en ítems flexibles.

Contenedor Flexible vs. Ítem Flexible

Un contenedor flexible es un elemento HTML con la propiedad display establecida en flex o inline-flex. Los ítems flexibles son los hijos directos de este contenedor. Por ejemplo, un <div> con display: flex es el contenedor, y sus elementos hijos, como otros <div> o <p>, son los ítems flexibles. Esta distinción es clave para entender cómo aplicar las propiedades de Flexbox.

section {
    display: flex;
    background-color: orange;
}
div {
    background-color: white;
    padding: 5px;
}

<section>
    <div>Ítem 1</div>
    <div>Ítem 2</div>
</section>

Aquí, <section> es el contenedor flexible, y los <div> son ítems flexibles.

Valor flex en CSS

El valor flex convierte un elemento en un modelo de caja flexible a nivel de bloque. Esto significa que el contenedor ocupa todo el ancho disponible, y sus ítems se organizan según las propiedades de Flexbox.

section {
    display: flex;
    background-color: orange;
    margin: 10px;
}

Este código transforma <section> en un contenedor flexible de nivel de bloque, afectando solo a sus hijos directos.

Valor inline-flex en CSS

El valor inline-flex convierte un elemento en un modelo de caja flexible a nivel en línea, lo que significa que el contenedor se comporta como un elemento en línea, ocupando solo el espacio necesario para su contenido.

section {
    display: inline-flex;
    background-color: orange;
    margin: 10px;
}

Este ejemplo crea un contenedor flexible en línea, útil para componentes como botones o menús que no requieren el ancho completo.

Propiedades de los Contenedores Flexibles

Las propiedades de los contenedores flexibles controlan cómo se distribuyen los ítems dentro del contenedor. Estas propiedades se aplican al contenedor y no a los ítems. Incluyen flex-direction, flex-wrap, flex-flow, justify-content, align-items y align-content.

Propiedad flex-direction

La propiedad flex-direction define el eje principal del contenedor flexible, que determina si los ítems se organizan en una fila (row) o columna (column). También permite invertir el orden con row-reverse o column-reverse.

section {
    display: flex;
    flex-direction: column;
    background-color: orange;
    margin: 10px;
}

En este ejemplo, los ítems se organizan verticalmente en una columna.

Propiedad flex-wrap

La propiedad flex-wrap controla si los ítems flexibles deben mantenerse en una sola línea o envolverse en múltiples líneas. Sus valores son nowrap (por defecto), wrap y wrap-reverse.

section {
    width: 130px;
    display: flex;
    flex-wrap: wrap;
    background-color: orange;
    margin: 10px;
}

Con wrap, los ítems que exceden el ancho del contenedor se mueven a la siguiente línea.

Propiedad flex-flow

La propiedad flex-flow es un atajo que combina flex-direction y flex-wrap. Por ejemplo, en lugar de escribir:

section {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

Puedes usar:

section {
    display: flex;
    flex-flow: column wrap;
}

Esto simplifica el código al combinar ambas propiedades.

Propiedad justify-content

La propiedad justify-content controla la alineación de ítems a lo largo del eje principal. Sus valores incluyen flex-start (por defecto), center, flex-end, space-between, space-around y space-evenly.

section {
    display: flex;
    justify-content: space-between;
    background-color: orange;
    margin: 10px;
}

En este ejemplo, space-between alinea el primer ítem al inicio, el último al final y distribuye el espacio restante entre los ítems intermedios.

Propiedad align-items

La propiedad align-items define la alineación de ítems a lo largo del eje transversal. Sus valores son stretch (por defecto), flex-start, center, flex-end y baseline.

section {
    display: flex;
    align-items: center;
    background-color: orange;
    height: 300px;
}

Aquí, center alinea los ítems en el centro del eje transversal del contenedor.

Propiedad align-content

La propiedad align-content controla la distribución de líneas en el eje transversal cuando hay múltiples líneas (es decir, con flex-wrap: wrap). No afecta a contenedores con una sola línea. Sus valores son stretch, flex-start, center, flex-end, space-between, space-around y space-evenly.

section {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    background-color: orange;
    width: 90px;
    height: 500px;
}

En este caso, space-around distribuye las líneas con espacio igual a ambos lados.

Propiedades de los Ítems Flexibles

Las propiedades de los ítems flexibles se aplican a los hijos directos del contenedor flexible y controlan su comportamiento individual. Incluyen align-self, order, flex-grow, flex-shrink, flex-basis y flex.

Propiedad align-self

La propiedad align-self permite alinear un ítem flexible específico en el eje transversal del contenedor, anulando la configuración de align-items. Sus valores son stretch, flex-start, center, flex-end y baseline.

.flex-item2 {
    align-self: center;
}

<section style="display: flex; height: 300px;">
    <div>Ítem 1</div>
    <div class="flex-item2">Ítem 2</div>
    <div>Ítem 3</div>
</section>

Aquí, flex-item2 se alinea al centro del eje transversal, mientras que los otros ítems siguen la configuración del contenedor.

Propiedad order

La propiedad order cambia el orden de los ítems flexibles sin modificar el HTML. Por defecto, todos los ítems tienen un valor de 0. Un valor mayor coloca el ítem más tarde en la secuencia.

section {
    display: flex;
}
.item1 {
    order: 3;
}
.item2 {
    order: 1;
}
.item3 {
    order: 2;
}

<section>
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</section>

Este código reorganiza los ítems en el orden 2, 3, 1. Usa order con precaución, ya que puede afectar la accesibilidad de los lectores de pantalla.

Propiedad flex-grow

La propiedad flex-grow determina cuánto espacio sobrante del contenedor debe asignarse a un ítem flexible. Su valor por defecto es 0.

.flex-item3 {
    flex-grow: 2;
}

<section style="display: flex;">
    <div>Ítem 1</div>
    <div>Ítem 2</div>
    <div class="flex-item3">Ítem 3</div>
</section>

En este ejemplo, flex-item3 ocupará el doble del espacio sobrante en comparación con los otros ítems.

Propiedad flex-shrink

La propiedad flex-shrink controla cuánto debe encogerse un ítem flexible cuando el espacio del contenedor es insuficiente. Su valor por defecto es 1.

.flex-item3 {
    flex-shrink: 0;
}

<section style="display: flex; width: 200px;">
    <div>Ítem 1</div>
    <div>Ítem 2</div>
    <div class="flex-item3">Ítem 3</div>
</section>

Aquí, flex-item3 no se encoge, mientras que los otros ítems se ajustan para caber en el contenedor.

Propiedad flex-basis

La propiedad flex-basis establece la longitud inicial de un ítem flexible antes de que se aplique flex-grow o flex-shrink. Su valor por defecto es auto.

.flex-item3 {
    flex-basis: 100px;
}

<section style="display: flex;">
    <div>Ítem 1</div>
    <div>Ítem 2</div>
    <div class="flex-item3">Ítem 3</div>
</section>

En este caso, flex-item3 comienza con un ancho de 100px antes de cualquier ajuste.

Propiedad flex

La propiedad flex es un atajo que combina flex-grow, flex-shrink y flex-basis. Por ejemplo:

.flex-item3 {
    flex: 1 0 100px;
}

Esto equivale a:

.flex-item3 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

Valores comunes incluyen flex: auto (1 1 auto), flex: none (0 0 auto) y flex: initial (0 1 auto).

Centrar Elementos Horizontalmente con Flexbox

Para centrar elementos horizontalmente, configura el contenedor con display: flex y justify-content: center.

section {
    display: flex;
    justify-content: center;
    background-color: orange;
    width: 100%;
    height: 400px;
}

<section>
    <div>Ítem centrado</div>
</section>

Esto alinea los ítems en el centro del eje principal.

Centrar Elementos Verticalmente con Flexbox

Para centrar elementos verticalmente, usa display: flex y align-items: center.

section {
    display: flex;
    align-items: center;
    background-color: orange;
    width: 100%;
    height: 400px;
}

<section>
    <div>Ítem centrado</div>
</section>

Esto alinea los ítems en el centro del eje transversal.

Centrar Elementos Horizontalmente y Verticalmente

Para centrar elementos en ambas direcciones, combina justify-content: center y align-items: center.

section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
    width: 100%;
    height: 400px;
}

<section>
    <div>Ítem centrado</div>
</section>

Este código centra los ítems tanto horizontal como verticalmente, ideal para diseños responsivos.

Conclusiones

CSS Flexbox es una herramienta poderosa para crear diseños web flexibles y responsivos. Con propiedades como flex-direction, justify-content y align-items, puedes controlar la disposición y alineación de elementos con precisión. Las propiedades de ítems flexibles, como flex-grow y align-self, permiten personalizar comportamientos individuales. Al dominar Flexbox, puedes construir interfaces modernas que se adapten a diferentes dispositivos y necesidades de diseño. Practica con los ejemplos proporcionados para consolidar tu conocimiento y experimentar con layouts avanzados.