Aligning flex items from the center

Hi everybody, this is a css/flexbox question. So I want to have two items aligned from the center outwards, that it, flex items coming from the exact middle of the flex container. I tried with margins auto and justify-content:center BUT when the items don't have the same width they are not aligned the by the middle.

Take a look at this example:

<div style="width:100%; height:auto; display:flex; outline:1px solid red; margin:20px 0px;">
        <span style="font-size:15px; color:red; margin:0px 5px 0px auto;">jnvevnv</span>
        <span style="font-size:15px; color:red; margin:0px auto 0px 0px;">jnvevnv</span>
    </div>
    <div style="width:100%; height:auto; display:flex; outline:1px solid red; margin:20px 0px;">
        <span style="font-size:15px; color:red; margin:0px 5px 0px auto;">lljlnljnljnljnljnljnljn</span>
        <span style="font-size:15px; color:red; margin:0px auto 0px 0px;">jnvevnv</span>
    </div>

If you look at the second row you will see how they dont't align by the center the way I want them, is it possible to do? I know I could also create two 50% width containers inside my container and use margins auto or align-self but I don't want to create two extra containers...

So to summarize, I want the elements to be SYMMETRICAL using flexbox.