Hoja de referencia CSS Flexbox: Cada propiedad explicada con ejemplos

CSS Flexbox es el sistema de diseno mas utilizado en el desarrollo web moderno. Proporciona una forma poderosa de alinear y distribuir elementos. Esta hoja de referencia completa de CSS Flexbox explica cada propiedad con ejemplos.

Construye layouts flexbox visualmente con nuestro Generador Flexbox →

Propiedades del contenedor

Flexbox comienza con un contenedor flex. Establece display: flex en un elemento padre.

display: flex | inline-flex

Define un contenedor flex.

.flex-container {
  display: flex;        /* block-level flex container */
}

.inline-flex-container {
  display: inline-flex;  /* inline-level flex container */
}

flex-direction

Establece la direccion del eje principal.

.container {
  /* Main axis: left to right (default) */
  flex-direction: row;

  /* Main axis: right to left */
  flex-direction: row-reverse;

  /* Main axis: top to bottom */
  flex-direction: column;

  /* Main axis: bottom to top */
  flex-direction: column-reverse;
}

justify-content

Controla la distribucion a lo largo del eje principal.

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* Result: [1][2][3]              */

  /* Center items */
  justify-content: center;
  /* Result:       [1][2][3]        */

  /* Pack items to the end */
  justify-content: flex-end;
  /* Result:              [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* Result: [1]     [2]     [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /* Result:  [1]   [2]   [3]     */

  /* Equal space between and around items */
  justify-content: space-evenly;
  /* Result:   [1]   [2]   [3]    */
}

align-items

Controla la alineacion a lo largo del eje transversal.

.container {
  display: flex;
  height: 200px;

  /* Stretch to fill container (default) */
  align-items: stretch;

  /* Align to the top */
  align-items: flex-start;

  /* Align to the center */
  align-items: center;

  /* Align to the bottom */
  align-items: flex-end;

  /* Align by text baseline */
  align-items: baseline;
}

flex-wrap

Controla si los elementos se ajustan a varias lineas.

.container {
  display: flex;

  /* All items on one line (default) — may overflow */
  flex-wrap: nowrap;

  /* Items wrap to next line when needed */
  flex-wrap: wrap;

  /* Items wrap in reverse order */
  flex-wrap: wrap-reverse;
}

/* Shorthand: flex-flow combines direction + wrap */
.container {
  flex-flow: row wrap;         /* same as flex-direction: row + flex-wrap: wrap */
  flex-flow: column nowrap;    /* column direction, no wrapping */
}

align-content

Controla el espaciado entre lineas cuando hay ajuste de linea.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;

  /* Pack lines to the start */
  align-content: flex-start;

  /* Center lines */
  align-content: center;

  /* Pack lines to the end */
  align-content: flex-end;

  /* Equal space between lines */
  align-content: space-between;

  /* Equal space around lines */
  align-content: space-around;

  /* Lines stretch to fill container (default) */
  align-content: stretch;
}

gap, row-gap, column-gap

Controla el espaciado entre elementos flex.

.container {
  display: flex;
  flex-wrap: wrap;

  /* Equal gap in both directions */
  gap: 16px;

  /* Different row and column gaps */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */

  /* Individual properties */
  row-gap: 20px;
  column-gap: 12px;
}

/* Example: card grid with gap */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card-grid > .card {
  flex: 1 1 300px;  /* grow, shrink, min 300px */
}

Propiedades de los elementos

Estas propiedades se aplican a elementos flex individuales.

order

Controla el orden visual. Por defecto 0.

.item-a { order: 2; }  /* appears third */
.item-b { order: -1; } /* appears first */
.item-c { order: 0; }  /* appears second (default) */

/* Visual result: [B] [C] [A]
   DOM order:     A    B    C
   Sorted order: -1    0    2  */

flex-grow

Define cuanto crece un elemento. Por defecto 0.

/* All items same size — share space equally */
.item { flex-grow: 1; }

/* Item B takes twice the extra space */
.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }
.item-c { flex-grow: 1; }
/* If 200px extra: A gets 50px, B gets 100px, C gets 50px */

/* Only item B grows to fill remaining space */
.item-a { flex-grow: 0; width: 100px; }
.item-b { flex-grow: 1; }
.item-c { flex-grow: 0; width: 100px; }
/* Result: [100px][    fill    ][100px] */

flex-shrink

Define cuanto se encoge un elemento. Por defecto 1.

/* Default: all items shrink equally */
.item { flex-shrink: 1; }

/* Prevent an item from shrinking */
.sidebar {
  flex-shrink: 0;
  width: 250px;  /* stays at 250px even when container is small */
}

/* Item A shrinks twice as fast */
.item-a { flex-shrink: 2; width: 300px; }
.item-b { flex-shrink: 1; width: 300px; }
/* If 100px must be removed: A loses ~67px, B loses ~33px */

flex-basis

Establece el tamano inicial antes de la distribucion.

.item {
  /* Use item's content size (default) */
  flex-basis: auto;

  /* Fixed starting size */
  flex-basis: 200px;

  /* Percentage of container */
  flex-basis: 25%;

  /* Use content's intrinsic size */
  flex-basis: content;

  /* Zero basis — ignore content size for space distribution */
  flex-basis: 0;
}

/* flex-basis vs width:
   - flex-basis sets the initial size BEFORE grow/shrink
   - width sets a fixed size
   - flex-basis is relative to the main axis
   - If both are set, flex-basis wins */

flex (abreviatura)

Abreviatura para flex-grow, flex-shrink y flex-basis.

/* flex: <grow> <shrink> <basis> */

.item { flex: 0 1 auto; }    /* default: don't grow, can shrink, auto basis */
.item { flex: 1; }           /* same as flex: 1 1 0%  — grow equally */
.item { flex: auto; }        /* same as flex: 1 1 auto — grow based on content */
.item { flex: none; }        /* same as flex: 0 0 auto — fully inflexible */
.item { flex: 2; }           /* same as flex: 2 1 0%  — grows 2x */
.item { flex: 1 0 300px; }   /* grow, don't shrink, start at 300px */

align-self

Anula align-items del contenedor para un elemento especifico.

.container {
  display: flex;
  align-items: flex-start;  /* all items at top */
  height: 200px;
}

.special-item {
  align-self: center;       /* this item centered vertically */
}

/* Values: auto | flex-start | flex-end | center | baseline | stretch */
.item-a { align-self: flex-start; }  /* top */
.item-b { align-self: center; }      /* middle */
.item-c { align-self: flex-end; }    /* bottom */
.item-d { align-self: stretch; }     /* full height */

Patrones de diseno comunes

Los patrones de layout flexbox mas utilizados en proyectos reales.

Centrar elementos

Flexbox hace que centrar sea trivial.

/* Horizontal centering */
.center-horizontal {
  display: flex;
  justify-content: center;
}

/* Vertical centering */
.center-vertical {
  display: flex;
  align-items: center;
  height: 100vh;
}

/* Perfect centering (both axes) */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Alternative: center with margin auto */
.center-auto {
  display: flex;
  height: 100vh;
}
.center-auto > .child {
  margin: auto;  /* centers in both axes */
}

Barra de navegacion

Una navbar responsive clasica.

/* Basic navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo {
  flex-shrink: 0;
}

.navbar .nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

/* Navbar with center section */
.navbar-3 {
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.navbar-3 .left   { flex: 1; }
.navbar-3 .center { flex: 0; white-space: nowrap; }
.navbar-3 .right  { flex: 1; display: flex; justify-content: flex-end; }

Cuadricula de tarjetas

Layout de tarjetas responsive con ajuste de linea.

/* Responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min 300px */
  max-width: 400px;
}

/* Cards with equal height */
.card-grid-equal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card-equal {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card-equal .card-body {
  flex: 1;           /* body fills remaining height */
}

.card-equal .card-footer {
  margin-top: auto;  /* footer pushed to bottom */
}

Pie de pagina fijo

El footer se queda abajo aunque haya poco contenido.

/* Sticky footer layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  flex-shrink: 0;  /* fixed height header */
}

main {
  flex: 1;         /* takes all remaining space */
}

footer {
  flex-shrink: 0;  /* fixed height footer */
}

/* HTML structure:
   <body>
     <header>...</header>
     <main>...</main>
     <footer>...</footer>
   </body>
*/

Layout Santo Grial

El clasico layout de tres columnas.

/* Holy grail layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page > header,
.page > footer {
  flex-shrink: 0;
}

.page > .content {
  flex: 1;
  display: flex;
}

.page .sidebar-left {
  flex: 0 0 200px;   /* fixed 200px left sidebar */
  order: -1;         /* appears first visually */
}

.page .main {
  flex: 1;           /* main content fills remaining space */
  min-width: 0;      /* prevent overflow */
}

.page .sidebar-right {
  flex: 0 0 200px;   /* fixed 200px right sidebar */
}

/* HTML structure:
   <div class="page">
     <header>Header</header>
     <div class="content">
       <main class="main">Main Content</main>
       <aside class="sidebar-left">Left</aside>
       <aside class="sidebar-right">Right</aside>
     </div>
     <footer>Footer</footer>
   </div>
*/

Flexbox vs Grid: cuando usar cada uno

Ambos resuelven problemas diferentes.

Flexbox es mejor para:

• One-dimensional layouts (a single row or column)
• Content-driven sizing (items determine their own width)
• Dynamic, unknown number of items
• Navigation bars and toolbars
• Centering elements
• Components where items should wrap naturally

CSS Grid es mejor para:

• Two-dimensional layouts (rows and columns together)
• Layout-driven sizing (the layout dictates item sizes)
• Complex page layouts with header, sidebar, content, footer
• Overlapping elements in a grid
• When you need precise control over both axes simultaneously
• Dashboard-style layouts with varying card sizes

/* Combining Flexbox and Grid */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Use Flexbox inside grid areas */
.page header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page main {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}

Soporte de navegadores

Flexbox tiene excelente soporte en todos los navegadores modernos.

Flexbox has over 99% global browser support. The only consideration is the gap property in flex contexts, which requires slightly newer browsers. For older browser support, use margins as a fallback:

/* Fallback for gap */
.container {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;       /* negative margin to offset item margins */
}
.container > .item {
  margin: 8px;        /* acts like gap: 16px */
}

/* Modern approach with @supports */
@supports (gap: 16px) {
  .container {
    gap: 16px;
    margin: 0;
  }
  .container > .item {
    margin: 0;
  }
}

Preguntas frecuentes

Cual es la diferencia entre justify-content y align-items?

justify-content controla el eje principal, align-items el eje transversal. Con flex-direction: column, los ejes se intercambian.

Cuando usar Flexbox en vez de Grid?

Flexbox para layouts 1D, Grid para 2D. Combinelos para mejores resultados.

Como hacer elementos flex de igual ancho?

Use flex: 1 en todos los elementos y min-width: 0 si es necesario.

Por que mi elemento flex no se encoge?

Por defecto min-width: auto lo impide. Agregue min-width: 0.

Se puede usar gap con Flexbox?

Si, gap funciona con Flexbox en todos los navegadores modernos.

CSS Flexbox es esencial para layouts modernos. Practica con nuestra herramienta interactiva.

Prueba nuestro Generador Flexbox interactivo →