Guía Completa de Flexbox

Contenedor Flex

Convierte un contenedor en Flexbox.

Elemento 1
Elemento 2
Elemento 3
display: flex;

Justify Content

Alinea elementos horizontalmente.

Elemento 1
Elemento 2
Elemento 3
justify-content: center;

Align Items

Alinea elementos verticalmente.

Elemento 1
Elemento 2
Elemento 3
align-items: center;

Flex Direction

Cambia la dirección del flujo de los elementos.

Elemento 1
Elemento 2
Elemento 3
flex-direction: column;

Flex Wrap

Permite que los elementos ocupen múltiples líneas.

Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
flex-wrap: wrap;

Gap

Agrega espacio entre los elementos.

Elemento 1
Elemento 2
Elemento 3
gap: 20px;

Order

Cambia el orden visual de los elementos.

Elemento 1
Elemento 2
Elemento 3
order: [valor];