Como alinhar à direita o item flex?

Uma abordagem mais flexível seria usar uma margem esquerda auto (Os itens flex tratam margens automáticas um pouco diferente do que quando usado num contexto de formatação de blocos).

.c {
    margin-left: auto;
}

Fiddle actualizado:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<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>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Se quiser usar o flexbox para isto, deverá ser capaz de o fazer (display: flex no contentor, flex: 1 nos itens, e text-align: right No .c):

.main { display: flex; }
.a, .b, .c {
  background: #efefef;
  border: 1px solid #999;
  flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

...ou alternativamente (ainda mais simples), se os itens não precisam se encontrar, você pode usar justify-content: space-between no recipiente e remover as regras text-align completamente:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Aqui está uma demonstraçãono Codepen para permitir que você tente rapidamente o acima.

Também pode usar um enchimento para preencher o espaço restante.

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

Actualizei a solução com 3 versões diferentes. Isto por causa da discussão da validade do uso de um elemento adicional de enchimento. Se você executar o código cortado você vê que todas as soluções fazem coisas diferentes. Por exemplo, a configuração da classe de enchimento no item b fará com que este item preencha o espaço restante. Isto tem o benefício de que não há espaço "morto" que não seja clicável.

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



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

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Ou podias apenas usar justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

Tão fácil como

.main { display: flex; flex-direction:row-reverse;}

Se necessitar que um item fique alinhado à esquerda (como um cabeçalho), mas depois vários itens alinhados à direita( como 3 imagens), então você faria algo do género:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Aqui está o que vai parecer (apenas o CSS relavent foi incluído no excerto acima)