How would you use display: flex to make a footer stick to the bottom?
Sticky Footer Using CSS Flexbox
You can use Flexbox on the root container to make a footer stick to the bottom of the page. The key is to make the page container a column flex container and allow the main content to grow and take available space.
Example: Sticky Footer Using Flex
Here, the body is a column flex container. The .main-content area expands to fill the remaining space using flex: 1, pushing the .footer to the bottom even if the content is short.
Best Practices
Use
flex-direction: columnon the parent container to align content vertically.Apply
flex: 1to the main content area so it grows and pushes the footer down.Ensure
htmlandbodyhaveheight: 100%to allow the container to occupy full viewport height.Use padding or margins carefully to prevent footer overlap.