Problem Statement
What is the difference between `display: flex` and `display: inline-flex`?
Explanation
`display: flex` makes the element a block-level flex container (takes full width, new line). `inline-flex` makes the container inline (flows within text) while still applying flex behavior to its children. So inline-flex does not break the line. :contentReference[oaicite:9]{index=9}
Code Solution
SolutionRead Only
.menu { display: inline-flex; }