Как правильно выровнять элемент flex?

более гибкий подход будет использовать auto левый край (flex элементы лечения автополя немного иначе, чем при использовании в блок контексте форматирования).

.c {
    margin-left: auto;
}

обновленный скрипку:

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

если вы хотите использовать flexbox для этого, вы должны быть в состоянии, сделав это (display: flex в контейнер flex: 1 по пунктам, и text-align: right on .c):

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

...или альтернативно (еще проще), если элементы не должны встречаться, вы можете использовать justify-content: space-between на контейнер и убрать text-align правила полностью:

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

здесь демо на Codepen, чтобы позволить вам быстро попробовать выше.

вы также можете использовать наполнитель, чтобы заполнить оставшееся пространство.

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

я обновил решение с 3 различными версиями. Это связано с обсуждением обоснованности использования дополнительного наполнительного элемента. Если вы запустите обрезанный код, вы увидите, что все решения делают разные вещи. Например, установка класса filler для элемента b заставит этот элемент заполнить оставшееся пространство. Это имеет то преимущество, что нет "мертвого" пространства, не кликабельный.

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

или вы могли бы просто использовать justify-content: flex-end

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

так же просто, как

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

Если вам нужно, чтобы один элемент был выровнен по левому краю (например, заголовок), но затем несколько элементов выровнены по правому краю (например, 3 изображения), то вы сделаете что-то вроде этого:

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
}

вот как это будет выглядеть (только relavent CSS был включен в фрагмент выше)