Write CSS to create a three column layout using Flexbox

Description: Create three columns: a left sidebar, a main content area (twice as wide) and a right sidebar.

Hint:

• Make the container display: flex.
• Use flex: 1 for the sides and flex: 2 for the middle.

---

CSS three column layout

<style>
  .row { display: flex; gap: 10px; }
  .left, .right { flex: 1; background: #ffe0b2; padding: 12px; }
  .main { flex: 2; background: #c8e6c9; padding: 12px; }
</style>

<div class="row">
  <div class="left">Left</div>
  <div class="main">Main content</div>
  <div class="right">Right</div>
</div>

Output in the browser:

How it works

• The free space is shared in the ratio 1 : 2 : 1, so the middle column gets half of the width.
• gap adds space between the columns.

Read CSS Flexbox.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.