GUÍA PRÁCTICA PARA APRENDER CSS FLEXBOX EN 2025
Introducción a CSS Flexbox
CSS Flexbox es un modelo de diseño que permite crear layouts responsivos de manera eficiente, distribuyendo contenido de forma dinámica en diferentes tamaños de pantalla. Este tutorial actualizado para 2025 te guiará paso a paso para construir cinco diseños prácticos, desde un sencillo diseño de tarjetas hasta el conocido “Holy Grail” de los layouts. Aprenderás cómo funcionan las propiedades de Flexbox, cómo usar SCSS para optimizar tu código y cómo aplicar consultas de medios para garantizar la adaptabilidad. Antes de comenzar, es recomendable tener conocimientos básicos de HTML y CSS, ya que este tutorial se centra en la aplicación práctica de Flexbox.
¿Qué es Flexbox?
Flexbox, o Flexible Box Layout, es un módulo de CSS que facilita la creación de diseños flexibles y responsivos. Permite organizar elementos a lo largo de un eje principal y un eje cruzado, ajustando su distribución según la propiedad flex-direction. Esto lo hace ideal para alinear contenido en filas o columnas, adaptándose a diferentes dispositivos sin necesidad de estructuras complejas. A diferencia de los métodos tradicionales como floats o posicionamiento absoluto, Flexbox simplifica la gestión del espacio y la alineación.
.container {
display: flex;
flex-direction: row;
gap: 20px;
}
En este ejemplo, el contenedor se convierte en un contexto flexible, alineando sus hijos en una fila con un espacio definido entre ellos.
Arquitectura de Flexbox
La arquitectura de Flexbox se basa en dos ejes: el eje principal y el eje cruzado. El eje principal se define mediante la propiedad flex-direction, que puede ser row (horizontal) o column (vertical). El eje cruzado es perpendicular al principal. Por ejemplo, si flex-direction es row, el eje principal es horizontal y el eje cruzado es vertical. Las propiedades como justify-content y align-items controlan la distribución y alineación de los elementos en estos ejes.
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Este código alinea los elementos en una columna, distribuyendo el espacio entre ellos y centrándolos en el eje cruzado.
Configuración inicial del proyecto
Antes de crear los diseños, configuraremos un entorno con SCSS, un preprocesador de CSS que permite usar variables, anidamiento y mixins para escribir código más limpio. Definiremos variables para valores reutilizables como espacios, colores y breakpoints, y ajustaremos los estilos predeterminados del navegador.
$gap: 4vh;
$padding: 4vh;
$color: #48cae4;
$bp: (
mobile: 480px,
tablet: 768px,
desktop: 1440px,
);
@mixin query($display) {
@each $key, $value in $bp {
@if ($display == $key) {
@media (max-width: $value) {
@content;
}
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
font-family: sans-serif;
font-size: 45px;
}
En este código, definimos variables para el espaciado ($gap y $padding), un color principal ($color) y breakpoints para dispositivos. El mixin query simplifica la creación de consultas de medios, y los estilos globales eliminan márgenes y establecen box-sizing para un cálculo consistente.
Diseño nivel 1: Layout de tarjetas
El primer diseño es un layout de tarjetas que organiza tres bloques, cada uno con tres cajas, en una disposición vertical. Este diseño es ideal para mostrar contenido como tarjetas de productos o perfiles.
HTML
<div class="container">
<div class="block-1">
<div class="box-1">A</div>
<div class="box-2">B</div>
<div class="box-3">C</div>
</div>
<div class="block-2">
<div class="box-4">D</div>
<div class="box-5">E</div>
<div class="box-6">F</div>
</div>
<div class="block-3">
<div class="box-7">G</div>
<div class="box-8">H</div>
<div class="box-9">I</div>
</div>
</div>
SCSS
El contenedor principal usa display: flex para activar Flexbox y organiza los bloques en una columna. Los bloques se distribuyen en filas, y las cajas dentro de cada bloque ocupan un tercio del espacio disponible.
.container {
display: flex;
flex-direction: column;
gap: $gap;
padding: $padding;
border: 1vh solid $color;
}
[class^="block-"] {
display: flex;
flex-direction: row;
height: (100vh - 2vh - $gap * 2 - $padding * 2) / 3;
gap: $gap;
@include query(mobile) {
flex-direction: column;
height: 500px;
}
}
[class^="box-"] {
display: flex;
justify-content: center;
align-items: center;
flex-basis: (100% / 3);
border: 2px solid black;
border-radius: 10px;
background-color: #c1c1c1;
}
En pantallas móviles, los bloques cambian a una disposición vertical para adaptarse al espacio reducido, utilizando la consulta de medios definida en el mixin query.
Diseño nivel 2: Barra de navegación
El segundo diseño crea una barra de navegación responsiva con cuatro elementos distribuidos uniformemente. Este layout es común en menús de sitios web.
HTML
<div class="container">
<div class="item-1">Home</div>
<div class="item-2">About</div>
<div class="item-3">Services</div>
<div class="item-4">Contact</div>
</div>
SCSS
El contenedor usa justify-content: space-evenly para distribuir los elementos de manera uniforme. En pantallas de tablet, los elementos se reorganizan en una columna.
.container {
font-size: 35px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: $padding;
border: 1vh solid $color;
@include query(tablet) {
height: 100vh;
flex-direction: column;
align-items: center;
gap: $gap;
}
}
Este código asegura que los elementos de la barra de navegación se adapten a diferentes tamaños de pantalla, manteniendo una presentación clara y funcional.
Diseño nivel 3: Layout con barra lateral
El tercer diseño crea un layout con una barra lateral y un área de contenido principal, ideal para interfaces como paneles de administración.
HTML
<div class="container">
<div class="block-1">Left</div>
<div class="block-2">Right</div>
</div>
SCSS
El contenedor organiza los bloques en una fila, con la barra lateral ocupando el 20% del ancho y el contenido principal el 80%. En móviles, los bloques se apilan verticalmente.
.container {
display: flex;
flex-direction: row;
gap: $gap;
padding: $padding;
@include query(mobile) {
flex-direction: column;
}
}
[class^="block-"] {
display: flex;
justify-content: center;
align-items: center;
border: 4px solid $color;
height: 100vh - $padding * 2;
@include query(mobile) {
height: 50vh - $padding * 2;
}
}
.block-1 {
flex-grow: 2;
}
.block-2 {
flex-grow: 8;
}
La propiedad flex-grow controla la distribución del espacio, permitiendo que el bloque principal ocupe más espacio que la barra lateral.
Diseño nivel 4: Segundo layout de tarjetas
El cuarto diseño es una variación del layout de tarjetas, con bloques que contienen diferentes cantidades de cajas y distribuciones de espacio personalizadas.
HTML
<div class="container">
<div class="block-1">
<div class="box-1">A</div>
</div>
<div class="block-2">
<div class="box-2">B</div>
<div class="box-3">E</div>
</div>
<div class="block-3">
<div class="box-4">C</div>
<div class="box-5">D</div>
</div>
</div>
SCSS
Cada bloque tiene una configuración específica de flex-basis para controlar el tamaño de las cajas. En móviles, los bloques se reorganizan para optimizar el espacio.
.container {
display: flex;
flex-direction: column;
padding: $padding;
gap: $gap;
}
[class^="block-"] {
display: flex;
flex-direction: row;
gap: $gap;
height: (100vh - $gap * 2 - $padding * 2) / 3;
@include query(mobile) {
flex-direction: column;
}
}
[class^="box-"] {
display: flex;
justify-content: center;
align-items: center;
border: 1vh solid $color;
border-radius: 10px;
background-color: #c1c1c1;
}
.box-1 {
flex-basis: 100%;
}
.box-2,
.box-5 {
flex-basis: 70%;
}
.box-3,
.box-4 {
flex-basis: 30%;
}
@include query(mobile) {
.block-2 {
height: (100vh * 2) / 3;
}
.block-3 {
flex-direction: row;
}
.box-2,
.box-3,
.box-4,
.box-5 {
flex-basis: 50%;
}
}
Este diseño demuestra cómo Flexbox permite personalizar la distribución de espacio de manera flexible y adaptable.
Diseño nivel 5: El Holy Grail de los layouts
El quinto diseño es el Holy Grail, un layout clásico que incluye un encabezado, un área de contenido principal, dos barras laterales y un pie de página. Este diseño es común en sitios web complejos.
HTML
<div class="container">
<div class="block-1">
<div class="box-1">A</div>
</div>
<div class="block-2">
<div class="box-2">B</div>
<div class="box-3">C</div>
<div class="box-4">D</div>
</div>
<div class="block-3">
<div class="box-5">E</div>
</div>
</div>
SCSS
El contenedor organiza los bloques en una columna, con el bloque central (box-3) ocupando la mayor parte del espacio. En móviles, se oculta una de las barras laterales para simplificar el diseño.
.container {
display: flex;
flex-direction: column;
gap: $gap;
padding: $padding;
}
[class^="block-"] {
display: flex;
flex-direction: row;
gap: $gap;
}
[class^="box-"] {
display: flex;
justify-content: center;
align-items: center;
border: 1vh solid $color;
border-radius: 10px;
}
.box-1,
.box-5 {
flex-basis: 100%;
height: 20vh;
}
.box-3 {
flex-basis: 60%;
height: 60vh - $gap * 2 - $padding * 2;
}
.box-2,
.box-4 {
flex-basis: 20%;
}
@include query(mobile) {
.block-2 {
flex-direction: column;
height: 60vh;
}
.box-2 {
display: none;
}
.box-3 {
flex-basis: 80%;
}
}
Este diseño muestra cómo Flexbox puede manejar layouts complejos mientras mantiene la responsividad.
Conclusiones
CSS Flexbox es una herramienta poderosa para crear diseños web modernos que se adaptan a diferentes dispositivos. A través de los cinco diseños presentados, has aprendido a usar propiedades como flex-direction, justify-content, align-items y flex-basis para controlar la distribución y alineación de elementos. Además, el uso de SCSS y mixins simplifica la gestión de estilos y consultas de medios, mejorando la eficiencia del desarrollo. Practica estos ejemplos en un entorno como CodePen para consolidar tus conocimientos y experimentar con diferentes configuraciones. Flexbox sigue siendo una habilidad esencial para cualquier desarrollador web en 2025, y dominarlo te permitirá crear interfaces atractivas y funcionales con facilidad.
