BigsonDev Logo
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
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.
PreviousReset & normalize for CSS
Next Outline HTML elements
THE GUIDE TO BEAT FRONTEND INTERVIEW
From time to time, I'll send you messages about new blog posts, knowledge pills, and mentoring promotions. Only valuable information, no spam included. You can unsubscribe at any time.
slack
Let's build a community that will help each other.
spread the word
You don't need to, it's okay...