Flexbox es una técnica de diseño CSS moderna que facilita la creación de estructuras de página complejas y su diseño adaptable (responsive design). Es particularmente útil cuando se trata de alinear elementos de manera eficiente y predecible en diferentes tamaños de pantalla y cuando los tamaños de tus elementos son desconocidos o dinámicos.

Convertir un contenedor en flex es bastante sencillo y se puede hacer aplicando la propiedad display: flex al contenedor que deseas convertir.

La propiedad flex-wrap en CSS es usada en un contenedor flex para controlar si los elementos hijos (items flex) deben aparecer en una sola línea o pueden envolverse en múltiples líneas. Esto es especialmente útil cuando se trabaja con diferentes tamaños de pantalla o con contenedores que pueden tener un ancho variable.

• flex-wrap: nowrap; (por defecto): Los elementos flex se ubican en una sola línea, y pueden encogerse para ajustarse al contenedor si es necesario.

• flex-wrap:wrap; Los elementos flex se distribuirán en múltiples líneas si no hay suficiente espacio en el contenedor para acomodarlos en una sola línea. La dirección del envoltorio sigue la dirección del eje principal.

• flex-wrap:wrap-reverse; Similar a wrap, pero los elementos flex se envolverán en la dirección opuesta del eje principal.

La dirección de los contenedores flexibles, es decir, cómo se organizan y orientan los elementos hijos (items flex) dentro de un contenedor flex, se controla mediante la propiedad flex-direction.

• flex-direction: row; (valor por defecto):   Los elementos flex se colocan de izquierda a derecha en el eje principal, en la dirección del texto (en la mayoría de los idiomas).

• flex-direction: row-reverse;  Los elementos flex se colocan de derecha a izquierda en el eje principal, en la dirección opuesta al texto. 

• flex-direction: column;Los elementos flex se colocan de arriba hacia abajo en el eje principal, apilándolos verticalmente.

• flex-direction: column-reverse;Los elementos flex se colocan de abajo hacia arriba en el eje principal, apilándolos verticalmente pero en orden inverso. 

Para manipular el orden de los elementos dentro de un contenedor Flexbox, puedes usar la propiedad order.

• Predeterminado: Por defecto, todos los elementos flexibles tienen un order de 0.

• Personalización: Puedes asignar un valor entero (positivo o negativo) a la propiedad order para cada elemento flexible, lo que cambiará su posición en el contenedor respecto a otros elementos.

• No afecta el DOM: Cambiar el order de un elemento no afecta su posición en el DOM, solo cómo se muestra visualmente.