How to Create a Two Column Responsive Layout using Flexbox
In this post we will give you information about How to Create a Two Column Responsive Layout using Flexbox. Hear we will give you detail about How to Create a Two Column Responsive Layout using FlexboxAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to create a two-column responsive layout by usingflexbox.
Note: This is my second project from the #15daysofcss challenge.
Codepen Demo
Here is the codepen demo of the two-column responsive layout.
Getting Started
First, we need to create an html markup which contains one main div with a two sub divs.
<div > <div ></div> <div ></div></div>
The Css (Layout)
Now, we need to set the .container class with a display: flex property so that it will place thetwo child items which are column-1 and column-2 in a horizontal direction or X-axis.
body { margin: 0; padding: 1rem; max-width: 1200px; margin: 30px auto;}.container{ display:flex;}.column-1 { flex-shrink: 0; /* shrinks to 0 to apply 70% width*/ flex-basis: 70%; /* sets initial width to 70% */}.box { background-color: rgb(245, 215, 160); padding: 10px; border-radius: 12px; border: 2px solid rgb(116, 113, 113); margin: 1rem; box-shadow: 1px 1px 1px #000;}In the above code, we have set .column-1 class with two properties flex-shrink: 0 and flex-basis:70%
By setting those two properties the column-1 occupies the 70% of the available space and the remaining 30% space is occupied by column-2 you can test it by opening the codepen demo in a new tab.
Responsive part
Currently, our two-column layout is fitting perfectly in larger devices to make the layout responsive in mobile devices we need to use @media queries and set the .container classwith a flex-direction: column.
@media only screen and (max-width: 900px) { .container { /* it place the items in vertical direction */ flex-direction: column; } .box { margin: 0 0 1rem; }}The flex-direction: column property places the child items in a vertical direction so that it will fit perfectly in the screens less than 900px.
Note: Our columns are breaking at 900px so that i used 900px.
Adding some content
Let’s add some content to our columns.
<div > <div > <h1>What is Lorem Ipsum?</h1> <p> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged </p> </div> <div > <h1>What is Lorem Ipsum?</h1> <p> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged </p> </div></div>
Final output:
Small tip: If you want to make column-1 30% and column-2 70% just remove the flex-shrink property in the .column-1 class
.column-1 { flex-basis: 70%;}I hope you enjoyed ✓ and learned something new.
If you are interested in doing 15daysofcss challenge checkout 15daysofcss page.
Hope this code and post will helped you for implement How to Create a Two Column Responsive Layout using Flexbox. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs