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 element using margin-right: auto. The problem is that pushes the center element off center. Is this possible without using absolute positioning?

HTML & CSS

#parent {    align-items: center;    border: 1px solid black;    display: flex;    justify-content: center;    margin: 0 auto;    width: 500px;  }  #left {    margin-right: auto;  }  #center {    margin: auto;  }

<div id="parent">    <span id="left">Left</span>    <span id="center">Center</span>  </div>

Answer 1

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>