How to create two column layout flexbox

CssHow-ToBeginner · 3 min read

How to Create Two Column Layout with Flexbox in CSS

To create a two column layout with flexbox, set the container's display to flex and give each child element a width of about 50%. This arranges the children side by side in two columns.

📐

Syntax

Use a container element with display: flex; to enable flexbox layout. Then, set the width of each child element to control the column size.

display: flex; makes the container arrange children in a row by default.
Child elements get widths like 50% to split space evenly.
You can add gap to create space between columns.

css

.container {
  display: flex;
  gap: 1rem; /* space between columns */
}

.child {
  width: 50%; /* half width for two columns */
}

💻

Example

This example shows a container with two boxes side by side, each taking half the width of the container. The gap adds space between the columns.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Two Column Flexbox Layout</title>
<style>
  .container {
    display: flex;
    gap: 1rem;
    border: 2px solid #333;
    padding: 1rem;
  }
  .column {
    width: 50%;
    background-color: #cce5ff;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid #004085;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1 content</div>
    <div class="column">Column 2 content</div>
  </div>
</body>
</html>

Output

A webpage showing two side-by-side boxes each with blue background and border, separated by space inside a bordered container.

⚠️

Common Pitfalls

Common mistakes when creating two column flexbox layouts include:

Not setting width or flex-basis on children, causing them to shrink or grow unexpectedly.
Forgetting box-sizing: border-box; which can cause columns to overflow due to padding and borders.
Using fixed widths that don't adapt on smaller screens, breaking responsiveness.
Not adding gap or margins, making columns stick together visually.

css

/* Wrong: no width set, columns shrink */
.container {
  display: flex;
}
.column {
  background: lightgray;
  padding: 1rem;
}

/* Right: set width and box-sizing */
.container {
  display: flex;
  gap: 1rem;
}
.column {
  width: 50%;
  box-sizing: border-box;
  padding: 1rem;
  background: lightblue;
}

📊

Quick Reference

Tips for two column flexbox layouts:

Use display: flex; on the container.
Set child width to 50% or use flex: 1; for equal columns.
Add gap for spacing between columns.
Use box-sizing: border-box; on children to include padding in width.
Make layout responsive by using relative widths or media queries.

✅

Key Takeaways

Set the container's display to flex to arrange children in a row.

Give each child element about 50% width for two equal columns.

Use gap to add space between columns for better visuals.

Apply box-sizing: border-box to avoid width overflow issues.

Use relative widths for responsive two column layouts.