How do I achieve the 'Holy Grail' of perfect centering?

You must combine two properties on the parent container: `justify-content: center` to align items perfectly along the main horizontal axis, and `align-items: center` to suspend them perfectly on the vertical cross axis.

Why are all my flex items the exact same height automatically?

Because the flexbox engine defaults to `align-items: stretch`. If you do not explicitly assign heights to your items, the browser will stretch them to match the tallest item in the row.

When should I use baseline instead of center alignment?

Use `baseline` when you have adjacent elements containing text of vastly different font sizes (like a huge ` ` next to a small ` `). It ensures the text bottoms out on the same invisible line, avoiding jagged optical alignment.

How do I achieve the 'Holy Grail' of perfect centering?

You must combine two properties on the parent container: `justify-content: center` to align items perfectly along the main horizontal axis, and `align-items: center` to suspend them perfectly on the vertical cross axis.

Why are all my flex items the exact same height automatically?

Because the flexbox engine defaults to `align-items: stretch`. If you do not explicitly assign heights to your items, the browser will stretch them to match the tallest item in the row.

When should I use baseline instead of center alignment?

Use `baseline` when you have adjacent elements containing text of vastly different font sizes (like a huge ` ` next to a small ` `). It ensures the text bottoms out on the same invisible line, avoiding jagged optical alignment.