¿Cómo alinear a la derecha el elemento flexible?

¿Hay alguna forma más flexible de alinear a la derecha el "Contacto" que usarlo 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/

Aqui tienes. Establecer justify-content: space-betweenen el contenedor flexible.

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

Un enfoque más flexible sería utilizar un auto margen izquierdo (los elementos flexibles tratan los márgenes automáticos de forma un poco diferente a cuando se usan en un contexto de formato de bloque).

.c {
    margin-left: auto;
}

Violín 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>

Si desea utilizar flexbox para esto, debe poder hacerlo ( display: flexen el contenedor, flex: 1en los elementos y text-align: righten .c):

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

... o alternativamente (aún más simple), si los artículos no necesitan reunirse, puede usarlos justify-content: space-betweenen el contenedor y eliminar las text-alignreglas por completo:

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

Aquí está un demostración en Codepen que le permite probar rápidamente lo anterior.

También puede usar un relleno para llenar el espacio 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;
}

He actualizado la solución con 3 versiones diferentes. Esto debido a la discusión de la validez de usar un elemento de relleno adicional. Si ejecuta el código cortado, verá que todas las soluciones hacen cosas diferentes. Por ejemplo, establecer la clase de relleno en el elemento b hará que este elemento llene el espacio restante. Esto tiene la ventaja de que no hay espacio 'muerto' en el que no se pueda hacer clic.

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

O simplemente podrías usar justify-content: flex-end

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

Tan fácil como

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

Agregue la siguiente clase CSS a su hoja de estilo:

.my-spacer {
    flex: 1 1 auto;
}

Coloque un elemento vacío entre el elemento de la izquierda y el elemento que desea alinear a la derecha:

<span class="my-spacer"></span>

Si necesita que un elemento quede alineado a la izquierda (como un encabezado) pero luego varios elementos alineados a la derecha (como 3 imágenes), entonces haría algo como esto:

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
}

Así se verá (solo se incluyó CSS ​​relevante en el fragmento anterior)

'justify-content: flex-end' funcionó dentro del contenedor de la caja de precios.

.price-box {
    justify-content: flex-end;
}

Me parece que agregar 'justify-content: flex-end' al contenedor flex resuelve el problema mientras que 'justify-content: space-between' no hace nada.

Para aquellos que usan Angular y Flex-Layout, use lo siguiente en el contenedor de elementos flexibles:

<div fxLayout="row" fxLayoutAlign="flex-end">

Vea los documentos de fxLayoutAlign aquí y los documentos completos de fxLayout aquí .

Código de ejemplo basado en la respuesta de TetraDev

Imágenes a la derecha:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Imágenes a la izquierda:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>