"obvious" is key point here.

This

    {  width:100px; 
       margin-left:1fr }  

has clear and obvious physical meaning: solid block with the spring of strength 1 on the left of it.

So the block is attached to the right side of its container. And so you don't need all those aligns - flex units can do alignment in more flexible ways.

That's obvious indeed.

But those flex-shrink/grow ...