How to Define Two Column Layout using Flexbox? Last Updated : 20 Jan, 2025 Comments Improve Suggest changes 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 Define Two Column Layout using Flexbox? 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 How to Create a Four-Column Layout with Bootstrap ? In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the ap 2 min read How to Create a 2-Column Layout Grid with CSS? Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or 4 min read How to Create a 4-Column Layout Grid with CSS? We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c 3 min read How to Create a 3-Column Layout Grid with CSS? Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as 3 min read Like