Day 4: Common Flexbox UI Patterns

Daily Objective

Implement essential real-world UI patterns powered by Flexbox.

1. Perfect Centering (Holy Grail)

.hero-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

2. Sticky Footer Pattern

Keep your footer at the bottom even with sparse content:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* Pushes the footer all the way to the bottom */
}

Daily Hands-on Practice (70%)

1. Implement the sticky footer pattern in your project.
2. Experiment with individual overrides using align-self and visual reordering with order.