Flexbox: navbars and card rows फ़्लेक्सबॉक्स: नेवबार और कार्ड की पंक्तियाँ

1. A flex navbar

Normally blocks stack one below another. display: flex; on a parent puts its children in a row. Then:

• justify-content spreads them along the row: flex-start, center, space-between (first at the left, last at the right)
• align-items: center; lines them up vertically in the middle
• gap: 16px; adds space between the children

A classic navbar: the logo on the left, the links on the right.

                .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.links {
  display: flex;
  gap: 16px;
  list-style: none;
}
              

Challenge: Auto Express navbar

Build the navbar:

• .navbar: flex, justify-content: space-between, align-items: center
• .links: flex with a gap, and list-style: none to remove the bullets

2. Wrapping rows of cards

A flex row tries to keep everything on one line, squeezing the children. For a set of product cards, let them wrap onto the next line:

• flex-wrap: wrap; — move to a new row when there is no space
• gap: 12px; — the same space between all cards
• justify-content: center; — keep the rows centred
• on a child, flex: 1 1 150px; means "start at 150px, grow and shrink as needed"

                .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.card {
  flex: 1 1 150px;
}
              

Challenge: Handloom cards that wrap

Make .cards a flex container that wraps, with a gap, and set justify-content to center (or a space-… value).