Note: The + and – operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% – 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
For the past several months I’ve been trying to learn more about the CSS flex box module. If you’re like me you learn from reading and then doing, so to help out I built a playground where you can learn about and test out the basics of the flex box module. The playground gives you all sorts of useful information about the various properties of flex box and an area to test basic layouts.
The is the first release (I’ll probably post this on GitHub) and I’m open to any suggestions on making this a better learning resource.