Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to 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.
Syntax
.container {
display: flex;
/* Additional flex properties as needed */
}
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: lightblue;
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>
Two equal-width light blue columns appear side by side with rounded corners, displaying "Column 1" and "Column 2" with their respective content.
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: lightgreen;
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-wrap 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>
Two equal-width light green columns appear side by side with rounded corners, displaying "Column 1" and "Column 2" with their respective content.
Conclusion
In this article we have learned how to define two column layout using flexbox. Both flex-direction: row and flex-wrap: wrap approaches create effective two-column layouts, with flexbox automatically handling equal distribution of space between columns.
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
