This looks awesome! Especially the explanations of how flexbox properties make elements line up in a certain way with the directional arrow, and how an element got its current size.
The only thing that I’d like to see a bit clearer is how the size change is communicated to the developer. Now it’s done with the ‘< < <’ icons, though I’m not quite sure if that’s the best way to indicate that. Maybe a small arrow that starts at the initial border pointing to the current border?
Overall, I feel this will really make debugging flexbox layout way easier!