XirfadHub Roadmap
Frontend Developer Roadmap
Step 4 / 1875 min

Flexbox

Web Foundations

Explanation

Flexbox aligns and distributes items in one dimension — perfect for navbars, toolbars, and card rows.

Code example

css
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Exercise

Rebuild your navigation and a feature row using Flexbox alignment and gap.