Wie kann ein Flex-Element rechts ausgerichtet werden?

Question

Gibt es eine flexbox-ähnlichere Möglichkeit, "Kontakt" rechts auszurichten, als position: absolute zu verwenden?

.main {
  display: flex;
}

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

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

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

Mit Titel

  Home
  Einige zentrierte Titel
  Kontakt

Ohne Titel

  Home

  Kontakt

http://jsfiddle.net/vqDK9/

Answer 1

Für diejenigen, die Angular und Flex-Layout verwenden, verwenden Sie folgendes auf dem flex-item Container:

Siehe fxLayoutAlign Dokumentationen hier und die vollständigen fxLayout Dokumentationen hier.

Answer 2

Ich finde, dass das Hinzufügen von 'justify-content: flex-end' zum Flex-Container das Problem löst, während 'justify-content: space-between' nichts bewirkt.

Answer 3

Beispielcode basierend auf Antwort von TetraDev

Bilder rechts:

* {
  outline: .4px gestrichelt rot;
}

.main {
  Anzeige: flex;
  Flex-Richtung: Reihe;
  Ausrichten von Elementen: Mitte;
}

h1 {
  Flex-Basis: 100%;
}

img {
  Abstand: 0 5px;
  Höhe: 30px;
}

  Sichere Zahlung

Bilder links:

* {
  outline: .4px gestrichelt rot;
}

.main {
  Anzeige: flex;
  Flex-Richtung: Reihe;
  Ausrichten von Elementen: Mitte;
}

h1 {
  Flex-Basis: 100%;
  Text-Ausrichtung: rechts;
}

img {
  Abstand: 0 5px;
  Höhe: 30px;
}

  Sichere Zahlung

Answer 4

Set justify-content: space-between auf dem flex container.