Two Column Layout in HTML using CSS Flexbox
You can create a two-column layout in multiple ways. I am creating a two-column layout using CSS flexbox in this HTML CSS tutorial. The output will be as given below.
The HTML file includes three divs. One is the parent div and the other two are the children divs. You can say parent div is the row and the others are columns.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two column layout with CSS flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="column1">
</div>
<div class="column2">
</div>
</div>
</body>
</html>So, there are three classes named flex-container, column1, and column2. See the css style file given below.
body {
width: 100%;
min-height: 100vh;
margin: 0 auto;
}
.flex-container {
display: flex;
width: 100%;
padding: 0;
}
.column1 {
background-color: #2E53EA;
flex: 50%;
min-height: 100vh;
padding: 10px;
}
.column2 {
background-color: aqua;
flex: 50%;
min-height: 100vh;
padding: 10px;
}
As you see, display: flex is used for the parent div to enable flex properties. Making the flex property 50% for the columns helps to divide the layout into two equal columns.
That’s how two column layout created using the CSS flexbox.
