Flexbox navigation bar

Flexbox shines for one-dimensional rows: logo on the left, links on the right, wrapping on small screens. You will use it constantly in headers.

Core properties

• display: flex on the container.
• justify-content: space-between — push groups apart.
• align-items: center — vertical alignment.
• gap — space between items without margin hacks.

HTML structure

Keep nav links in a <ul> inside <nav> for semantics; reset list styles in CSS.

Practice

1. Add a fourth nav item—gap keeps spacing even.
2. Set flex-wrap: wrap and shrink the window.
3. Try margin-left: auto on the ul instead of space-between.

Important interview questions and answers

1. Q: Flexbox vs Grid in one line?
   A: Flex lays out along one axis; Grid handles two-dimensional rows and columns together.
2. Q: What does `justify-content` control?
   A: Alignment along the main axis of the flex container.
3. Q: Why use `gap` instead of margins on every item?
   A: Gap is consistent, avoids first/last margin bugs, and works with wrapping.