CSS Flexbox #14: How to Build a Card Layout in Flexbox

Card designs are very popular all over the web. You see them on social media sites and online shops.

They are so popular as they present information clearly and understandably.

This tutorial will explain how to create a card layout with CSS Flexbox.

---

Step #1. Create the HTML

• Open the code editor of your liking
• Create an empty HTML file
• Visit this page, copy the HTML code and save the file

The whole content of each card is wrapped in a link tag, that way the user will be redirected when clicking/tapping on any part of it.

---

Step #2. The Basic CSS Styles

It’s time to create some basic styling.

• Create a CSS file called style.css (already linked in the HTML file)
• Type this code:

/* Reset */ * {     margin: 0;     padding: 0;     box-sizing: border-box; }  /* Typography */  body {     font-family: sans-serif; }  /* Header Styles */  .header {     background-color: rgb(4, 25, 94);     height: 5em;     border-bottom: 5px solid rgb(60, 127, 172); }  h1 {     text-align: center;     color: rgb(255, 255, 255);     font-size: x-large; }  .main {     width: 100%;     background-color: rgb(197, 196, 196); }  .card-container {     width: 90%;     margin: 0 auto;     padding: 0.5em 0;     background-color: rgb(0, 0, 0); }  .city {     width: 90%;     margin: 0.5em auto;     background-color: rgba(31, 31, 31, 0.95);     border: 2px solid rgb(173, 223, 169); }  .city-image, .description {     width: 90%;     margin: 0 auto; }  .city-image {     padding: 1.2em 1em; }   .description {     padding: 1em 2em; }  .city-image img {     display: block;     margin: 0 auto;     max-width: 100%;     height: auto; }  a {     color: white;     text-decoration: none;     font-family: sans-serif; }  .description h2 {     padding-bottom: 0.5em; }

The card-container div is 90% wide compared to its parent container (main). It has been horizontally centered using the margin: 0 auto property. The same happens with its child containers (city).

This is almost everything you have to do, to code the mobile layout. The title on the header will be centered with Flexbox.

---

Step #3. The Flexbox Styles

Let’s center the title on the header section.

• Edit the CSS code:

/* FLEXBOX STYLES */   .header {  display: flex;  align-items: center;  justify-content: center;  }

The mobile layout is ready. In order to code the other two layouts, you have to write 2 media queries. The first one between 640px and 1000px and the second one from 1001px upwards.

---

Step #4. The Media Queries

---

Tablet Layout

• Edit the CSS code:

.card-container {  display: flex;  flex-flow: wrap;  }

You have turned the card-container into a flex container and all its children items into flex items. The default flex-direction value is row (not included in the flex-flow declaration). It is necessary to assign a flex-basis value (ideal size) to each one of the city containers, as you already learned in the 6th tutorial of this series.

• Edit the CSS code:

.city {  flex: 1 0 48%;  margin: 1%;  }

Each city item now has a flex-grow value of 1, that means they are going to grow at the same proportion if there is enough space available. Their flex-shrink value is 0, that means that items will not shrink at all. Each item has a flex-basis value of 48% of the width of the flex container. That way you assure that every row will have always two cards.

---

Desktop Layout

To code the desktop layout, you have to add another media query, so you can have 3 columns in your card design instead of 2.

• Edit the CSS code:

@media (min-width: 1001px) { .city { flex: 1 0 31%; } }

As you can notice, the last card spans over the whole width of the flex container. That is because you declared a flex-grow factor of 1. Let’s target this card individually.

• Edit the CSS code inside the media query:

.city:last-of-type { flex-grow: 0; }

---

With Floats

Hint: you do not have to code this part. It’s only a demonstration of how this layout would look if you try to code its floating elements.

• The CSS code:

@media (min-width: 640px) {   /* WITH FLOATED ELEMENTS */  .city { float: left; width: 49%; }  .city:last-child { clear: left; }  .card-container { overflow: auto; } }

By now you already have realized the advantages of working with Flexbox instead as with floats. Thanks for reading, stay tuned for more Flexbox content!

---

Previous tutorials in this Flexbox series

• CSS Flexbox #1. Creating Your First Flexbox Layout
• CSS Flexbox #2. How to Use the justify-content Property
• CSS Flexbox #3. The align-items Property
• CSS Flexbox #4. The flex-grow Property
• CSS Flexbox #5. The flex-shrink Property
• CSS Flexbox #6. The flex-basis Property
• CSS Flexbox #7. The order Property
• CSS Flexbox #8. The flex-wrap Property
• CSS Flexbox #9. The align-content Property
• CSS Flexbox #10. The flex Shorthand Property
• CSS Flexbox #11. Shorthand Default Values
• CSS Flexbox #12. The flex-flow shorthand property
• CSS Flexbox #13. Create a Navigation Menu with Flexbox