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

Ein flexiblerer Ansatz wäre es, einen linken Rand von auto zu verwenden (Flex-Elemente behandeln auto margins etwas anders als im Blockformatierungskontext).

.c {
    margin-left: auto;
}

Aktualisierte Vorschau:

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

Mit Titel

    Startseite
    Ein Titel zentriert
    Kontakt

Ohne Titel

    Startseite

    Kontakt

Problem
Gibt es einen mehr flexbox-ähnlichen Weg, "Kontakt" rechts auszurichten, als position absolute zu verwenden?

Answer 2

Hier ist es. Setze justify-content: space-between auf den Flex-Container.

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

Mit Titel

    Startseite
    Einige zentrierte Titel
    Kontakt

Ohne Titel

    Startseite

    Kontakt

Answer 3

Sie können auch einen Füllstoff verwenden, um den verbleibenden Platz zu füllen.

    Startseite
    Einige zentrierte Titel

    Kontakt

.filler{
    flex-grow: 1;
}

Ich habe die Lösung mit 3 verschiedenen Versionen aktualisiert. Dies liegt an der Diskussion über die Gültigkeit der Verwendung eines zusätzlichen Füllstoffelements. Wenn Sie den Code-Schnipsel ausführen, sehen Sie, dass alle Lösungen unterschiedliche Dinge tun. Wenn Sie beispielsweise die Filler-Klasse auf Element b setzen, wird dieses Element den verbleibenden Platz füllen. Dies hat den Vorteil, dass es keinen "toten" Bereich gibt, der nicht anklickbar ist.

Update: jetzt mit Display-Raster (nur zum Spaß)

    Startseite
    Einige zentrierte Titel

    Kontakt

    Startseite
    Einige zentrierte Titel
    Kontakt

    Startseite
    Einige zentrierte Titel
    Kontakt

    Startseite
    Einige zentrierte Titel
    Kontakt

.main { display: flex; justify-content: space-between; }
.mainfiller { display: flex; }
.main-grid { display: grid; grid-template-columns: min-content 1fr min-content; }
.text-centered { text-align: center; }
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }

Answer 4

Wenn Sie Flexbox dafür verwenden möchten, sollten Sie dies tun können, indem Sie Folgendes tun (display: flex im Container, flex: 1 in den Elementen und text-align: right in .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), wenn die Elemente nicht übereinstimmen müssen, können Sie justify-content: space-between im Container verwenden und die text-align Regeln vollständig entfernen:

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

Hier ist ein Demo auf Codepen, damit Sie das oben Genannte schnell ausprobieren können.

Answer 5

Oder du könntest einfach justify-content: flex-end verwenden

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