How To Define Two Column Layout Using Flexbox ? - GeeksforGeeks

Trang chủ » Html Css Div 2 Column Layout » How To Define Two Column Layout Using Flexbox ? - GeeksforGeeks

Có thể bạn quan tâm

A two-column layout is a common design pattern where content is arranged into two columns, making efficient use of space and enhancing readability. Using CSS Flexbox, this layout becomes flexible and responsive, automatically adjusting to different screen sizes and orientations. In this article, we will see two common approaches to creating a two-column layout using Flexbox.

Here we are following some common approaches:

Table of Content

  • Using display: flex and flex-direction: row
  • Using Flex Container with Flex Wrap

Using display: flex and flex-direction: row

To create a two-column layout, first, we create an <div> element with property display: flex, which 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 the required 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: Two-Column Layout with Equal Widths

In this example, we create a simple two-column layout where both columns have equal widths.

HTML <!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-1

two column layout using flexbox Example Output

Example 2: Two-Column Layout with Unequal Widths

In this example, we create a two-column layout where the first column occupies 70% of the width and the second column occupies 30%.

HTML <!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:greensolid5px; margin:50px; } </style> </head> <body> <div class="Parent"> <div class="child1"> <h1>Geeksforgeeks</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-2

two column layout using flexbox Example Output

Using Flex Container with Flex Wrap

In the Flex Container with Flex Wrap approach, a flex container is created withdisplay: flex;. Flex items are allowed to wrap into multiple lines usingflex-wrap: wrap;, enabling a fluid layout where items adjust according to available space while maintaining responsiveness.

Syntax:

display: flex; flex-wrap: wrap;

Example: Two-Column Layout with Flex Wrap

In this example, we create a two-column layout where the columns wrap when the available space is reduced.

HTML <!DOCTYPE html> <html> <head> <title>Two Column Layout with Flexbox and Flex Wrap</title> <style> .body{ padding:0; margin:0; } .Parent{ display:flex; flex-wrap:wrap; /* Enable flex wrap */ } .child1, .child2{ width:50%; height:100vh; display:flex; /* Enable flex behavior for children */ align-items:center; /* Center content vertically */ justify-content:center; /* Center content horizontally */ } .child1{ background-color:green; color:white; } .child2{ background-color:white; color:green; } </style> </head> <body> <div class="Parent"> <div class="child1"> <center> <h1>Left</h1> </center> </div> <div class="child2"> <center> <h1>RIGHT</h1> </center> </div> </div> </body> </html>

Output:

two-column-layout-using-flexbox

two column layout using flexbox Example Output

Comment More info Next Article How to Divide Text Into Two Columns Layout using CSS ?

M

mishrapriyank17 Follow Improve

Từ khóa » Html Css Div 2 Column Layout