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

So einfach wie

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

Answer 2

Margin-left: auto works well. But clean flex box solution would be space-between in the main class. Space between works well if there is two or more elements. I have added a solution for single element as well.

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;}
.b { flex: 1; text-align: center; }

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

.c-wrapper2 {
  display: flex;
  flex: 1;
  flex-flow: row-reverse;
}

    Home
    Einige zentrierte Überschrift
    Kontakt

    Home
    Kontakt

      Kontakt
      Kontakt2

      Kontakt
      Kontakt2

Answer 3

Fügen Sie die folgende CSS-Klasse zu Ihrem Stylesheet 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:

Answer 4

Wenn Sie möchten, dass ein Element linksbündig (wie eine Überschrift) angeordnet ist, aber dann mehrere Elemente rechtsbündig (wie 3 Bilder), würden Sie etwas Ähnliches tun:

h1 {
   flex-basis: 100%; // zwingt dieses Element dazu, verbleibenden Platz einzunehmen
}

img {
   margin: 0 5px; // kleiner Abstand zwischen Bildern
   height: 50px; // Bildbreite wird im Verhältnis zur Höhe angezeigt, falls die Bilder groß sind - optional, wenn die Bilder bereits die richtige Größe haben
}

So wird das aussehen (nur der relevante CSS-Code wurde im obigen Snippet enthalten)

Answer 5

'justify-content: flex-end' hat innerhalb des Preiskastencontainers funktioniert.

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