How to Right-align flex item?

Question

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute?

.main { display: flex; }

.a, .b, .c { background: #efefef; border: 1px solid #999; }

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

.c { position: absolute; right: 0; }

<h2>With title</h2>

<div class="main">

    <div class="a"><a href="#">Home</a></div>

    <div class="b"><a href="#">Some title centered</a></div>

    <div class="c"><a href="#">Contact</a></div>

</div>

<h2>Without title</h2>

<div class="main">

    <div class="a"><a href="#">Home</a></div>

    <!--<div class="b"><a href="#">Some title centered</a></div>-->

    <div class="c"><a href="#">Contact</a></div>

</div>

http://jsfiddle.net/vqDK9/

Answer 1

You can set the justify-content: space-between on the flex container.

Try this:

.main { 

    display: flex; 

    justify-content: space-between;

  }

.a, .b, .c { background: #efefef; border: 1px solid #999; }

.b { text-align: center; }

<h2>With title</h2>

<div class="main">

    <div class="a"><a href="#">Home</a></div>

    <div class="b"><a href="#">Some title centered</a></div>

    <div class="c"><a href="#">Contact</a></div>

</div>

<h2>Without title</h2>

<div class="main">

    <div class="a"><a href="#">Home</a></div>

<!--     <div class="b"><a href="#">Some title centered</a></div> -->

    <div class="c"><a href="#">Contact</a></div>

</div>