Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Home/Pills/ Pill - Flexbox equal height cards/
Home/Pills/Pill - Flexbox equal height.../
Image by Erik Lucatero from Unsplash

Flexbox equal height cards

Dec 1, 2020

DESCRIPTION

Make all cards equal height with flexbox. Especially helpful when content is dynamic and can't set fixed height.

Preview

Flexbox magic

HTML
CSS

Summary

  • Flexbox was used on the container div to make all child cards equal height.
  • A card itself is also constructed with flexbox for column layout.
  • flex: 1 property expands height of the card content to keep button at the bottom for all cards.
logo with a rocket of the BigDevSoon application

Level up your Frontend skills

Build real-world projects with professional designs, powered by GitHub automation.
spread the word
Did you like this post? Share it with the world! 🌐