No se entiende que hace y como funciona el "flex-basis" Los links que dejaron tampoco explican muy bien.

Entiende a flex-basis como un width y un height para elementos con display flex. Si el flex-direction es row, flex-basis servirá de width. Si es column, flex-basis servirá de height.

Si no estableces un valor a flex-basis o lo pones como auto, tomará los valores que le hayas puesto a width y a height. Si si le estableces valores, estos sobre-escribirán los de width y height.

En el link que te dejaron abajo de W3 Schools hay un ejemplo bastante práctico que puedes modificar para entenderlo mejor.

Hola, probablemente este artículo pueda servirte. Hace una comparación con width y al mismo tiempo explica cómo funciona flex-basis.

Puedes probar como funciona aquí: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-basis

Pero si cambio la medida por una mas chica por ejemplo su ancho inicial no cambia, si le pongo 1rem es igual a que le ponga 10 o 20 rem