Guía Completa de CSS Flexbox para Diseños Responsivos

Flexbox revolucionó la creación de layouts en CSS al ofrecer un sistema eficiente para distribuir espacios y alinear elementos. Esta guía práctica te enseñará desde los fundamentos hasta técnicas avanzadas con ejemplos reales para dominar el diseño flexible.

Ir directamente al contenido

Guía Completa de CSS Flexbox para Diseños Responsivos

Ejemplo de layout creado con Flexbox

Conceptos Fundamentales

Flexbox opera con un modelo de contenedor e ítems hijos. Al definir display: flex activamos dos ejes principales:

Eje Principal

Dirección definida por flex-direction (fila/columna)

Eje Cruzado

Perpendicular al eje principal

El poder de Flexbox reside en su capacidad para adaptar espacios y distribuir elementos dinámicamente

Propiedades del Contenedor

Estas propiedades controlan el comportamiento global de los ítems:

.contenedor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

Propiedad	Valores	Función
flex-direction	row, column, row-reverse	Define dirección principal
justify-content	center, space-between, flex-start	Alineación en eje principal
align-items	stretch, center, baseline	Alineación en eje cruzado
flex-wrap	nowrap, wrap	Control de multilínea

Propiedades de los Ítems

Propiedades aplicables directamente a los elementos hijos:

flex-grow

Capacidad de crecimiento relativo

flex-shrink

Capacidad de reducción relativa

flex-basis

Tamaño base antes de distribuir espacio

.item {
  flex: 1 0 200px; /* grow, shrink, basis */
  align-self: flex-end; /* Alineación individual */
}

Ejemplo: Menú Responsivo

Creación de un menú adaptable para móvil y escritorio:

<nav class="menu-flex">
  <div class="logo">Logo</div>
  <div class="items">
    <a href="#">Inicio</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
  </div>
</nav>

<style>
.menu-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .menu-flex { flex-direction: column; }
}
</style>

Técnicas Avanzadas

Patrones útiles para diseños complejos:

Grid de tarjetas

Distribución uniforme con flex-wrap

Sticky footer

Pie de página siempre abajo

Centrado perfecto

Combinación justify-content + align-items

Herramientas de Aprendizaje

Recursos recomendados para practicar:

Usa DevTools de navegadores para inspeccionar y modificar propiedades Flexbox en tiempo real

Herramienta	Tipo	Enlace
Flexbox Froggy	Juego interactivo	flexboxfroggy.com
CSS Tricks Guide	Guía visual	css-tricks.com/snippets/css/a-guide-to-flexbox
Flexy Boxes	Generador	the-echoplex.net/flexyboxes

Sobre el autor

Diseñadora Frontend con especialización en CSS. Creadora de cursos online sobre diseño responsivo.

DevHub Global Solutions | Educativo