Example 2: Gotcha - `flex` on Parent Container

This example demonstrates the common gotcha: forgetting to apply `flex` to the parent container.

Incorrect: Without `flex` on Parent

Here, the parent `div` does NOT have the `flex` class. Notice how the items stack vertically (default block behavior).

Item A (No Parent Flex)

Item B (No Parent Flex)

Item C (No Parent Flex)

Correct: With `flex` on Parent

Here, the parent `div` HAS the `flex` class. The items now line up horizontally.

Item A (Parent Flex)

Item B (Parent Flex)

Item C (Parent Flex)

Gotcha Point:

The `flex` class must be applied to the direct parent of the items you want to arrange horizontally. If it's missing, the children will behave according to their default display property (usually `block`, causing them to stack vertically).