Aligning elements left and center with flexbox

Add third empty element:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

And the following style:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Only left and right are set to grow and thanks to the facts that…

• there are only two growing elements (doesn’t matter if empty) and
• that both get same widths (they’ll evenly distribute the available space)

…center element will always be perfectly centered.

This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens (flexbox is magical).

In action:

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>