Flexbox — BryanDocs

Flexbox Playground Interactivo

Cambia las propiedades del contenedor flex en tiempo real y observa cómo reaccionan los ítems.

flex-direction flex-wrap justify-content align-items gap 8px

A

B
alto

C

D — ancho

E

.container { display: flex; }

flex-grow · flex-shrink · flex-basis Ítems

Propiedades de los ítems. El shorthand flex: grow shrink basis los combina.

flex:1
grow=1

flex:2
grow=2

flex:1
grow=1

flex: 1;          /* crece igual */
flex: 0 0 200px;  /* fijo 200px  */
flex: none;       /* no flex     */
flex: auto;       /* 1 1 auto    */

align-self · order Ítems

align-self anula align-items para un ítem. order cambia el orden visual sin tocar el HTML.

order:3
end

order:1
center

order:2
stretch

align-content Multi-línea

Distribuye el espacio entre las filas de un flex container multi-línea (cuando hay flex-wrap: wrap). No aplica en contenedores de una sola línea.

A

B

C

D

E

F

align-content: flex-start | flex-end | center |
               space-between | space-around |
               space-evenly | stretch

gap · row-gap · column-gap Espaciado

Define el espacio entre ítems en flex y grid. Reemplaza los márgenes negativos del patrón antiguo. No afecta a los bordes del contenedor.

gap: 8px

Ítem 1

Ítem 2

Ítem 3

Ítem 4

gap: 16px;              /* row y column iguales */
gap: 8px 16px;          /* row-gap  column-gap */
row-gap: 8px;           /* solo entre filas */
column-gap: 16px;       /* solo entre columnas */

place-items · place-content · place-self Shorthand

Shorthands que combinan align-* y justify-* en una sola propiedad. Funcionan en flex y grid.

/* place-items: align-items justify-items */
place-items: center;        /* centro en ambos ejes */
place-items: start end;

/* place-content: align-content justify-content */
place-content: center space-between;

/* place-self: align-self justify-self (en un ítem) */
place-self: end center;

/* Centra perfectamente un elemento en grid */
.grid-center {
  display: grid;
  place-items: center;
}

Patrones comunes con Flexbox Patrones

Soluciones reutilizables para los layouts más frecuentes.

Centrado perfecto

Centrado

display:flex; align-items:center; justify-content:center;

Footer pegajoso

main (flex:1)

footer

body{min-height:100vh; display:flex; flex-direction:column;} main{flex:1}

flex-wrap · responsive sin media queries Responsive

flex-wrap: wrap combinado con flex-basis crea layouts responsivos sin media queries: las tarjetas pasan a nueva fila cuando no caben.

flex: 1 1 120px

.container { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 200px; } /* crece y se encoge, base 200px */
/* Sin media queries → responsive automático */

CSS Flexbox