Wie richtet man ein flexibles Element nach rechts aus?

Ein flexiblerer Ansatz wäre die Verwendung eines auto linken Rands (Flex-Elemente behandeln automatische Ränder etwas anders als in einem Blockformatierungskontext).

.c {
    margin-left: auto;
}

Geige aktualisiert:

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

Wenn Sie hierfür flexbox verwenden möchten, sollten Sie dazu in der Lage sein (display: flex auf dem Container, flex: 1 auf den Elementen und text-align: right auf .c):

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

... oder alternativ (noch einfacher) können Sie justify-content: space-between für den Container verwenden und die text-align -Regeln vollständig entfernen, wenn die Gegenstände nicht übereinstimmen müssen:

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

Hier ist eine Demo für Codepen, damit Sie das oben Genannte schnell ausprobieren können.

Sie können auch einen Füllstoff verwenden, um den verbleibenden Raum auszufüllen.

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

Ich habe die Lösung mit 3 verschiedenen Versionen aktualisiert. Dies liegt an der Diskussion der Gültigkeit der Verwendung eines zusätzlichen Füllelements. Wenn Sie den Code snipped ausführen, werden Sie feststellen, dass alle Lösungen unterschiedliche Aufgaben ausführen. Wenn Sie beispielsweise die Füllklasse für Element b festlegen, füllt dieses Element den verbleibenden Platz. Dies hat den Vorteil, dass es keinen "toten" Raum gibt, auf den nicht geklickt werden kann.

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

Oder Sie könnten einfach justify-content: flex-end verwenden

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

So leicht wie

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

Fügen Sie Ihrem Stylesheet die folgende CSS-Klasse hinzu:

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

Platzieren Sie ein leeres Element zwischen dem Element links und dem Element, das Sie rechts ausrichten möchten:

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

Wenn Sie möchten, dass ein Element linksbündig ausgerichtet ist (wie eine Kopfzeile), aber mehrere Elemente rechtsbündig ausgerichtet sind (wie 3 Bilder), würden Sie Folgendes tun:

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
}

So sieht das aus (nur relaventes CSS wurde im obigen Snippet aufgenommen)

'justify-content: flex-end' funktionierte im Preisboxcontainer.

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

Ich finde, dass das Hinzufügen von 'Rechtfertigen-Inhalt: Flex-Ende' zum Flex-Container das Problem löst, während 'Rechtfertigen-Inhalt: Zwischenraum' nichts bewirkt.

Verwenden Sie für Benutzer, die Angular und Flex-Layout verwenden, Folgendes für den Flex-Item-Container:

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

Siehe fxLayoutAlign docs hier und die vollständigen fxLayout-Dokumente hier .

Diese Lösung sollte funktionieren

.main{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
}

.main .c{
margin-left: auto;
order: 2;
}

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

Beispielcode basierend auf Antwort von TetraDev

Bilder rechts:

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

Bilder links:

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