CSS Flexbox: Implement a Sticky Footer Layout

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1; /* Pushes footer down */
  padding: 20px;
}

.footer {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

How it works: This snippet demonstrates how to create a sticky footer using Flexbox. By setting 'html' and 'body' to 'height: 100%' and 'body' to 'display: flex' with 'flex-direction: column', the content area ('.content') can be given 'flex: 1'. This property makes the content area grow to fill available space, effectively pushing the footer to the bottom of the viewport, regardless of content length.