How to make a responsive layout with a flexbox very easy
Responsive layout with a flexbox or mobile-ready approach in the process of making websites is very important these days. Many developers choose the mobile-first road for development. Did you know from the end of March 2018, Google uses mobile-first indexing. Therefore if your site is not mobile-friendly your rankings could be hurt.
For the sake of nice-looking websites on all screen sizes, in this article, I will walk you through the process of making responsive cards with the CSS flex-box. I don’t want to write about the flexbox itself, you can find a lot of information on Mozilla MDN Web Docs.
The idea behind a responsive layout with a flexbox
In this illustration, as you can see I want to make three cards in one row side by side with some space between them. I plan to achieve that using flexbox and a little trick with “justify-content: space-between”, “flex-wrap: wrap” on the parent container, and with “flex: 0 0 31%” for all direct child’s elements.
HTML Code
What would you do at first when I ask you “How to make a responsive layout with a flexbox”? If your answer is making an HTML structure at first we are on the same page. Otherwise switch it quickly. Down there you can see complete HTML code for our little project, let me explain it quickly.
In the head I have included a link for the Font Awesome since I’m using a book, university, and bell icon. Beneath is the link for my styling, and the title.
In the body there is one division with class “cards-container” which encloses a division with a class called “container”. The same division has one more class called “d-flex” which I will explain a little bit later. The container has a division with two classes “cards” and “d-flex” as well. Inside “cards” there are three divisions with a class called “card”. Each card encompasses one icon from Font Awesome library, one heading, and one paragraph with few sentences of lorem ipsum text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>CSS Trick</title>
</head>
<body>
<sesction class="cards-container">
<div class="container d-flex">
<div class="cards d-flex">
<div class="card">
<i class="fas fa-book fa-2x"></i>
<h4>Book</h4>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Incidunt commodi cumque ullam, ipsa porro dolore?
</p>
</div>
<div class="card">
<i class="fas fa-university fa-2x"></i>
<h4>University</h4>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Incidunt commodi cumque ullam, ipsa porro dolore?
</p>
</div>
<div class="card">
<i class="fas fa-bell fa-2x"></i>
<h4>Bell</h4>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Incidunt commodi cumque ullam, ipsa porro dolore?
</p>
</div>
</div>
</div>
</section>
</body>
</html>
How to make a responsive layout with a flexbox – CSS code
Now when we are over with HTML code we need to do some styling with CSS, and finally use the secret weapon called the Flexbox. Additionally, I have added a nice “Open Sans” font from the Google fonts library. Here comes the code.
As I said, the first lines are reserved for font and reset styling. Then comes a part of the body with “font-family, line-height, height, and background” in section “General Style”. Rules for “h4” are just below. Very often I’m paying attention to the details throughout making my tutorials. This time I have made orange lines beneath each title, so code for that is with “before” pseudo-selector. Don’t forget to add “position: relative” on the parent element, this time this is “h4”.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/*===== Reset Style =====*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*===== General Style =====*/
body {
font-family: "Open Sans", sans-serif;
line-height: 1.6;
height: 100vh;
background: #dadada;
}
h4 {
position: relative;
margin-bottom: 20px;
font-size: 24px;
font-weight: 400;
}
h4::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 30px;
background: #e3872d;
}Utilities go next. Here we have two classes, “container” and “d-flex”. If you are using the Bootstrap framework so far you may have heard about it. In this tutorial, they don’t have the same features, but I’m borrowing the name convection from Bootstrap. The “container” has width and max-width properties followed by “margin: auto” and height of 100%. This is very important because I want to put some borders on my main container.
Class “d-flex” contains flex-box properties. These are important for today’s project. Let me tell you why. By default divisions are block and they are at the top of another. With property “display: flex” all child divisions become flex items, and they have another layout. That is side by side.
Now I need to center it on the main axis using a property called “align-items: center”. For adding space between cards we need to utilize another property called “justify-content: space-between”. Besides, don’t forget to put height on the parent division, in our case that is a division with a class “container”.
/*===== Utilities =====*/
.container {
width: 1200px;
max-width: 95%;
margin: auto;
height: 100%;
}
.d-flex {
display: flex;
justify-content: space-between;
align-items: center;
}However, there are two more things to do for the sake of free room between cards. First, for each division with a class “card”, we need to specify flex-grow, flex-shrink, and flex-basis. In our case, those values are “flex: 0 0 32%”. If you want more space between, reduce the last value. Then, we need to target division with class name “cards” with a property “flex-wrap: wrap” for layout one on the top of another on smaller screen sizes.
/*===== Cards Section =====*/
.cards-container .cards {
flex-wrap: wrap;
}
.cards-container .cards .card {
background: #050c23;
color: #fff;
flex: 0 0 32%;
padding: 20px;
border-radius: 5px;
}
.card i {
margin-bottom: 20px;
background: #e3872d;
padding: 20px;
border-radius: 50px;
}Media query and Responsive part
For our cards, we need only one media query with a “max-width” of 768px. That means when we hit that width all rules will be applied. The layout will be changed. I want to target the “card” division and change the flex-basis to 100% and add a “margin-bottom” of 20px.
@media (max-width: 768px) {
.cards-container .cards .card {
flex: 0 0 100%;
margin-bottom: 20px;
}
}Final words about our article How to make a responsive layout
Well, congratulations for sticking with me till the end. I didn’t talk about properties for each “card” and for the icons, but I believe you can figure it out on your own. I hope this article is valuable for you, additionally, you can use it for your next project. Otherwise, you understand the concept. This knowledge you can apply to other sections. For more useful articles you can follow me on Twitter and on YouTube channel.