Guía Completa de Flexbox

¿Qué es Flexbox?

Flexbox es un modelo de diseño en CSS que proporciona una forma eficiente de alinear y distribuir espacio entre elementos dentro de un contenedor. Esto es especialmente útil cuando el tamaño de los elementos es dinámico o desconocido.

Propiedades del Contenedor Flexible

display: flex;: Define un contenedor flexible.
flex-direction: Establece la dirección principal (fila o columna). Ejemplo:
```
flex-direction: row | row-reverse | column | column-reverse;
```
flex-wrap: Controla si los elementos deben ajustarse a una nueva línea. Ejemplo:
```
flex-wrap: nowrap | wrap | wrap-reverse;
```

justify-content: Alinea los elementos a lo largo de la dirección principal. Ejemplo:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

align-items: Alinea los elementos a lo largo del eje transversal. Ejemplo:
```
align-items: flex-start | flex-end | center | baseline | stretch;
```

align-content: Alinea las líneas de un contenedor con múltiples líneas. Ejemplo:

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

Ejemplo 1: Dirección y Envoltura

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Ejemplo 2: Justificación y Alineación

Elemento A

Elemento B

Elemento C

Propiedades de los Elementos Flexibles

flex: Define cómo un elemento crece, se reduce o se ajusta. Ejemplo:
```
flex: grow shrink basis;
```

align-self: Alinea un elemento individualmente. Ejemplo:

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Ejemplo 3: Propiedad `flex`

Elemento Grande

Elemento Pequeño

Conclusión

Flexbox es una herramienta poderosa para construir diseños modernos y responsivos. Experimenta con las propiedades mencionadas para crear tus propios diseños flexibles.