Flexbox en CSS

Contenedor Flex:

Supongamos que tenemos una lista de elementos que queremos organizar horizontalmente utilizando Flexbox:
```
<div class="container">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>
```
Y el CSS para convertir el contenedor en un contenedor flex:
```
.container {
  display: flex;
}
```
Con esto, los elementos se organizarán horizontalmente uno al lado del otro.
Ejes principales y secundarios:

Si queremos que los elementos se organicen en columnas en lugar de filas, podemos usar la propiedad flex-direction:
```
.container {
  display: flex;
  flex-direction: column;
}
```
Ahora, los elementos se colocarán verticalmente, uno debajo del otro.

Alineación de elementos:

Para alinear los elementos dentro del contenedor flex, podemos utilizar propiedades como justify-content y align-items:

.container {
  display: flex;
  justify-content: center; /* alinea los elementos horizontalmente al centro */
  align-items: center; /* alinea los elementos verticalmente al centro */
}

Espaciado entre elementos:

Podemos controlar el espacio entre los elementos utilizando justify-content para el eje principal y align-items para el eje secundario:

.container {
  display: flex;
  justify-content: space-between; /* distribuye el espacio entre los elementos horizontalmente */
  align-items: center; /* alinea los elementos verticalmente al centro */
}

Orden de los elementos:

Si queremos cambiar el orden de los elementos, podemos usar la propiedad order:
```
.container div:nth-child(2) {
  order: -1; /* mueve el segundo elemento al inicio */
}
```
Flexibilidad de elementos:

Si queremos que un elemento se expanda más que los demás para llenar el espacio disponible, podemos usar la propiedad flex:
```
.container div:nth-child(2) {
  flex: 2; /* este elemento será el doble de ancho que los demás */
}
```

Estos son solo algunos ejemplos de cómo utilizar Flexbox en CSS para crear diseños flexibles y dinámicos. Con la combinación adecuada de propiedades y valores, se pueden lograr una variedad de diseños complejos y adaptativos.

Flexbox en CSS

Vídeo explicativo