"obvious" is key point here. This { width:100px; margin-left:1fr } has clear and obvious physical meaning: solid block with the spring of stre

"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 ...