Los elementos flex son hijos del contenedor flex. Ya no son elementos de tipo inline ni de bloque. Por lo tanto, se pueden modificar las propiedades de los elementos para obtener la posición correcta.

flex-basis

]flex-basis] define el tamaño inicial de un elemento flex antes de que se distribuya el espacio adicional. Se puede establecer usando px, %, em o auto (tamaño basado en el contenido).

flex-basis: auto | value;

flex-grow

La propiedad flex-grow determina la capacidad de un elemento flexible para crecer en relación con otros elementos dentro de un contenedor flexible cuando hay espacio adicional disponible.

La propiedad flex-grow acepta un valor sin unidad que indica el tamaño relativo del elemento flexible en comparación con otros elementos. Por ejemplo, si un elemento tiene un valor de flex-grow de 2 y otro tiene un valor de 1, el primer elemento crecerá el doble que el segundo cuando haya espacio adicional en el contenedor flexible.

order

La propiedad order se utiliza para definir el orden de visualización de los elementos flex dentro de su contenedor. Por defecto, los elementos flex se muestran en el orden en que aparecen en el documento HTML. Sin embargo, podemos modificar este orden utilizando la propiedad order.

El valor de order puede ser cualquier número. Incluso si solo tenemos 3 elementos, asignar order: 1000; al segundo elemento no significa que tendremos 1000 elementos. Simplemente indica que el segundo elemento se ubicará en la última posición. Además, si algunos elementos comparten el mismo valor de order, el navegador los posicionará según el orden en que aparecen en el documento HTML. Vamos a reorganizar el order de los elementos en la siguiente lista. El objetivo es colocar el tercer elemento en la primera posición.