Flexbox Flip Card Grid

Michael BourneUpdated:

Tags:

A few weeks back, an X user was asking about making his flip card grip responsive, as well as clearing up issues with text size forcing the flip cards to extend past their parent container. I took his layout and made it into a flexbox, allowing for full fluidity and responsiveness.

The setup on this one is quite simple. Create a new section containing a single row and column, and give that column the custom class flexcards. Inside this column, place as many flip card elements as you need. The more you use, the better this system works.

Then paste this into custom CSS:

.flexcards {
  flex-flow: row wrap; 
  display: flex!important;
}

.flexcards .x-card-outer {
  flex: 1 1 300px; 
  margin: 0;
}

.flexcards .x-card-outer .x-card-inner {
  width: 100%;
  min-height: 240px!important;
}

You may notice the min-height I use above. The reason for this is the inline height value applied to flipcards by Cornerstone. There is one workaround to make this a little more elegant, however. Use my Equal Height Columns tutorial and target the class .x-card-inner to dynamically calculate the new height.

View Demo

Download the template file here:

Click to download flexboxflipcards.zip

Have a question or a comment about this article? Click here!
About the Author

Michael Bourne

Facebook

Hey, I'm Michael, and I've been making websites since the mid 90s! These days I focus on Wordpress and would call myself quite handy in PHP, JS, and CSS. Outside of coding and web design, I'm quite fond of craft beer and backpacking around the world.

Share this Tip!