Learn how to design beautiful and responsive card layouts using CSS Flexbox. A beginner-friendly step-by-step guide with clean code and easy explanation.
Modern websites often use cards to display content like blog posts, products, profiles, or services. These cards should look good on both desktop and mobile devices. That’s where Flexbox in CSS comes to the rescue.
In this guide, you’ll learn how to create a responsive card layout using Flexbox, with easy-to-understand explanations and clean code examples.
You’ll create a layout like this:
A row of cards on large screens
Cards stack vertically on small screens (mobile)
Each card will have a title and description
Fully responsive using only CSS
Let’s start by writing the HTML. This is the skeleton of our layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Cards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card-container">
<div class="card">
<h2>Card Title 1</h2>
<p>This is a short description of the card content.</p>
</div>
<div class="card">
<h2>Card Title 2</h2>
<p>This is a short description of the card content.</p>
</div>
<div class="card">
<h2>Card Title 3</h2>
<p>This is a short description of the card content.</p>
</div>
</div>
</body>
</html>
.card-container
is the outer box that holds all the cards.
Each .card
is an individual box with a title and paragraph.
Now let’s make it look good using CSS Flexbox.
Create a file named styles.css
and add the following styles:
/* Reset and base styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
line-height: 1.5;
}
/* Container holds all cards */
.card-container {
display: flex; /* Enable Flexbox */
flex-wrap: wrap; /* Wrap to next line if space runs out */
justify-content: center; /* Center the cards */
gap: 20px; /* Space between cards */
padding: 20px;
background-color: #f8f9fa;
}
/* Each card box */
.card {
background-color: white;
width: 300px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px); /* Lift effect on hover */
}
.card h2 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
}
.card p {
font-size: 1rem;
color: #666;
}
display: flex
Turns the container into a Flexbox, which allows us to align cards horizontally.
flex-wrap: wrap
If there’s not enough space in one row, the cards will move to the next line.
justify-content: center
Centers the cards horizontally inside the container.
gap: 20px
Adds space between the cards—cleaner than using margin manually.
.card
Each card:
Has a fixed width (300px
)
Padding inside the card
White background with subtle shadow
Rounded corners
When you move your mouse over a card, it moves up slightly, making it feel interactive.
We want the cards to look great on mobile too. Let’s add a media query to stack them vertically.
Add this at the end of your CSS:
@media (max-width: 768px) {
.card {
width: 100%; /* Full width on small screens */
}
}
When the screen size is 768px or smaller, each card stretches to fill the container’s width. Cards appear in a vertical stack, which is easier to read on phones.
Want to make your cards more attractive? Add an image inside each card.
<div class="card">
<img src="https://via.placeholder.com/300x150" alt="Card image">
<h2>Card Title</h2>
<p>This is a short description of the card content.</p>
</div>
.card img {
width: 100%;
height: auto;
border-radius: 6px;
margin-bottom: 15px;
}
✅ Clean and responsive layout
✅ Cards align in a row on desktop
✅ Stack vertically on mobile
✅ Looks professional with hover effect
✅ No JavaScript needed
Creating responsive layouts doesn’t have to be hard. With Flexbox, you can build flexible and beautiful card layouts with just a few lines of CSS. This technique works great for blogs, product listings, portfolios, and more.
Now you’re ready to build your own responsive card designs and take your CSS skills to the next level!
Thank you for visiting! Enjoy exploring our diverse collection of blogs, crafted with passion and insight to inspire and inform. Happy reading!