Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Define Two Column Layout Using Flexbox
To create a two column layout using flexbox can be so easy if you have the knowledge of CSS display property. Flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container. To know more about the CSS Flexbox Layout visit the attached link.
Imagine we have parent div and inside that div we have two child div all we have to do is place those child div side by horizontally.
Ways to define two column layout using flexbox
We have to set "display: flex;" on parent element so the flex property can be applicable on elements.
- Define two column layout using flex-direction property
- Define two column layout using flex-wrap property
Define two column layout using flex-direction property
We can create a two column layout using CSS flex-direction property. First we need to create a parent element and inside that element we will create two child element, which will be placed side by side in a two column layout structure.
- First we will set "display: flex;" on parent element so the flex property can be activated.
- Now we will set the "flex-direction: row;" on the same parent element so the child element will render horizontally from left to right.
Example
In the following code we have used the above described approach to create a two column layout.
<!DOCTYPE html>
<html>
<head>
<title>Define two column layout using flexbox</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin: 5px;
padding: 10px;
background-color: gray;
Result border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Define two column layout using flexbox</h3>
<p>
Here in this example we have used
CSS display & flex-direction property.
</p>
<div class="container">
<div class="col">
<h6>Column 1</h6>
<p>This is the content of column 1.</p>
</div>
<div class="col">
<h6>Column 2</h6>
<p>This is the content of column 2.</p>
</div>
</div>
</body>
</html>
Define two column layout using flex-wrap property
We can create a two column layout using CSS flex-wrap property. First we need to create a parent element and inside that element we will create two child element, which will be placed side by side in a two column layout structure.
- First we will set "display: flex;" on parent element so the flex property can be activated.
- Now we will set the "flex-wrap: wrap;" on the same parent element so the child element will render horizontally from left to right.
Example
In the following code we have used the above described approach to create a two column layout.
<!DOCTYPE html>
<html>
<head>
<title>Define two column layout using flexbox</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
margin: 5px;
padding: 10px;
background-color: gray;
Result border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Define two column layout using flexbox</h3>
<p>
Here in this example we have used
CSS display & flex-direction property.
</p>
<div class="container">
<div class="col">
<h6>Column 1</h6>
<p>This is the content of column 1.</p>
</div>
<div class="col">
<h6>Column 2</h6>
<p>This is the content of column 2.</p>
</div>
</div>
</body>
</html>
Conclusion
In this article we have learned how to define two column layout using flexbox, in the first approach we have used CSS flex-direction property and in the second approach we have used CSS flex-wrap property. You can use which ever you want both of them are recommended. We can define the width of each column individually using CSS width property.
If we set "display: flex;" on the parent element will keep the child element side by side in multiple column layout, if there are three child all of them will be render as three column layout.
5K+ Views
