How to have two fixed width columns with one flexible column in the center with CSS?

Sometimes, we want to have two fixed width columns with one flexible column in the center with CSS.

In this article, we’ll look at how to have two fixed width columns with one flexible column in the center with CSS.

How to have two fixed width columns with one flexible column in the center with CSS?

To have two fixed width columns with one flexible column in the center with CSS, we use flexbox.

For instance, we write

<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>

to add nested divs.

Then we write

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}

to make the div with the column and center class stretch to fill the remaining space with flex: 1.

The other 2 divs has width set to 100px.

We make the div with ID container a flex container with display: flex;.

Conclusion

To have two fixed width columns with one flexible column in the center with CSS, we use flexbox.