Aligning elements left and center with flexbox

Question

I\'m using flexbox to align my child elements. What I\'d like to do is center one element and leave the other aligned to the very left. Normally I would just set the left el

Answer 1

Add third empty element:

  
Left
  
Center
  

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;
}

  
Left
  
Center