Why Isn't My Flexbox Working?

Let's break down the " rakes " all beginners step on.

1. Forgotten Parent Height

You write align-items: center, but the block doesn't center on screen.

• Cause: By default, block height (div) equals its content height. Parent has nowhere to center children!
• Solution: Add min-height: 100vh or fixed height to parent.

2. Flex Container vs Flex Element

• display: flex makes an element a container, but its children become elements.
• Properties justify-content, align-items, gap are written for the PARENT.
• Properties flex-grow, align-self, order are written for the CHILD.

3. Margin: auto — Hidden Hero

If you need to push one element away from others (e.g., " Exit " button in menu), don't use complex calculations.

.logout { margin-left: auto; } /* Works perfectly only inside flex! */