How to Define Two Column Layout using Flexbox? Last Updated : 20 Jan, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Here are the methods to define a two-column layout using Flexbox:Method 1. Using display: flex and flex-direction: rowThis method creates a horizontal two-column layout by setting the flex-direction to row. HTML <html> <head> <style> .container { display: flex; flex-direction: row; } .column { flex: 1; padding: 10px; box-sizing: border-box; } .left-column { background-color: #f0f0f0; } .right-column { background-color: #d0d0d0; } </style> </head> <body> <div class="container"> <div class="column left-column"> <h2>Left Column</h2> <p>This is the left column content.</p> </div> <div class="column right-column"> <h2>Right Column</h2> <p>This is the right column content.</p> </div> </div> </body> </html> The .container div is a flex container with flex-direction: row, aligning child elements horizontally.Both columns have flex: 1, making them occupy equal space.Method 2. Using Flex Container with Flex WrapThis method ensures a responsive two-column layout that wraps columns to the next line on smaller screens. HTML <html> <head> <style> .container { display: flex; flex-wrap: wrap; } .column { flex: 1; padding: 10px; box-sizing: border-box; } .left-column { background-color: #f0f0f0; } .right-column { background-color: #d0d0d0; } @media (max-width: 768px) { .column { flex: 100%; } } </style> </head> <body> <div class="container"> <div class="column left-column"> <h2>Left Column</h2> <p>This is the left column content.</p> </div> <div class="column right-column"> <h2>Right Column</h2> <p>This is the right column content.</p> </div> </div> </body> </html> The flex-wrap: wrap property ensures the columns wrap onto the next line when the container's width is insufficient.A media query adjusts the layout for screens smaller than 768px, stacking the columns vertically. Comment More infoAdvertise with us Next Article How to Divide Text Into Two Columns Layout using CSS ? M mishrapriyank17 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Divide Text Into Two Columns Layout using CSS ? Dividing text into two-column layouts using CSS allows for a more structured and visually appealing content presentation. It helps break long text into manageable sections, improving readability and user experience. By using CSS techniques, you can easily create balanced and organized multi-column d 4 min read How to Set a Fixed Width Column with CSS Flexbox ? When working with CSS flexbox, setting a fixed width for a column can be achieved by using various approaches to override the default behavior of flex items, which typically grow and shrink to fill available space. Table of Content Using the flex propertyUsing the min-width and max-width propertiesC 4 min read How to Create a Basic Two-Column Layout using Bootstrap 5 ? To create a basic two-column layout using Bootstrap, first, we have to enclose your content within a container, then create two divs with classes like col or col-xx, where xx represents the breakpoint for responsive behavior. Place your content inside these columns, and Bootstrap will handle the lay 3 min read How to Arrange Two Items Per Row Using Flexbox? Flexbox in CSS is a powerful layout module that allows you to easily design complex layouts. It provides an efficient way to distribute space among items in a container, even when their sizes are unknown or dynamic.Below are the approaches to Arrange Two Items Per Row Using Flexbox:Table of ContentU 2 min read How to Disable Equal Width Columns in CSS Flexbox? With CSS Flexbox, developers can easily create complex and responsive layouts due to its powerful layout module. Its capacity to create equal-height columns inside flex containers is one of its features. There are situations, though, in which you might want to turn this behavior off and allow the he 2 min read How to create a Trello Layout with CSS Grid and Flexbox ? Trello layout is used to organize or manage information in stages. It can be created using CSS Grid and Flexbox. Let's create the layout as shown in the below image. In the image, Trello Layout consists of Trello List which holds the items or information in it. Layout Structure: Trello layout Exampl 2 min read Like