How to use display: flex and flex-direction: row in CSS
To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns. In the case of a two-column layout, we add two divs inside the parent div.
Syntax:
<div style=" display: flex; flex-direction: row; " ></div>
Example 1: A two-column layout with both columns having equal width.
<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<style>
.body {
padding: 0;
margin: 0;
}
.Parent {
display: flex;
flex-direction: row;
}
.child1 {
width: 50%;
height: 100vh;
background-color: green;
text-align: right;
color: white;
}
.child2 {
width: 50%;
color: green;
height: 100vh;
}
</style>
</head>
<body>
<div class="Parent">
<div class="child1">
<h1>Geeksfo</h1>
<center>
<h1>Left</h1>
</center>
</div>
<div class="child2">
<h1>rgeeks</h1>
<center>
<h1>RIGHT</h1>
</center>
</div>
</div>
</body>
</html>
Output:
two column layout using flexbox Example Output
Example 2: In this example we creates a two-column layout using Flexbox. The first column occupies 70% of the width and has a green background with white text. The second column occupies 30% and has a green border and padding.
<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<style>
.body {
padding: 0;
margin: 0;
}
.Parent {
display: flex;
flex-direction: row;
}
.child1 {
width: 70%;
height: 100vh;
background-color: green;
text-align: center;
color: white;
}
.child2 {
width: 30%;
padding: 30px;
height: 100vh;
border: green solid 5px;
margin: 50px;
}
</style>
</head>
<body>
<div class="Parent">
<div class="child1">
<h1>w3wiki</h1>
</div>
<div class="child2">
<h2>
We provide a variety of services
for you to learn, thrive and also
have fun! Free Tutorials, Millions
of Articles, Live, Online and
Classroom Courses ,Frequent Coding
Competitions, Webinars by Industry
Experts, Internship opportunities
and Job Opportunities.
</h2>
</div>
</div>
</body>
</html>
Output:
two column layout using flexbox Example Output
How to define two column layout using flexbox ?
A two-column layout using Flexbox is a design approach where content is arranged into two columns using CSS Flexbox properties. This allows for flexible and responsive distribution of content, adjusting automatically to different screen sizes and device orientations. To create the two-column layout, we use display and flex-direction properties.
Here we are following some common approaches :
Table of Content
- Using display: flex and flex-direction: row
- Using Flex Container with Flex Wrap