Day 2: Alignment & Gap

Daily Objective

Master alignment across both main and cross axes using justify-content, align-items, and gap.

1. Alignment Properties

• justify-content: Aligns along the main axis (flex-start, center, flex-end, space-between, space-around, space-evenly).
• align-items: Aligns along the cross axis (stretch, center, flex-start, flex-end).
• gap: Cleaner replacement for margins between flex items!

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

Daily Hands-on Practice (70%)

1. Experiment with all values of justify-content on a test row.
2. Play Flexbox Froggy levels 1 through 10.