Wie Rechtsbündig flex-Element?

Gibt es eine mehr flexbox-ish Weg nach rechts ausrichten "Kontakt", als position: absolute?

CSS:

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

HTML:

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

Sie können float rechts, aber es ist die gleiche Art und Weise...! Der beste Weg ist die Verwendung von display-Tabelle mit text-align.
Sicher, wenn das ist besser. Immer noch Probleme mit der rechts-Angleichung "Kontakt" wenn: jsfiddle.net/vqDK9/1
Ich aktualisiert Ihre Geige jsfiddle.net/vqDK9/2
Hier sind mindestens zwei Wege dies zu tun: stackoverflow.com/a/33856609/3597276

InformationsquelleAutor Mark Boulder | 2014-03-15

367

Hier gehen Sie. Set justify-content: space-between auf der flex-container.

CSS:
```
.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
```
HTML:
```
<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="c"><a href="#">Contact</a></div>
</div>
```
- Oder justify-content: flex-end
- Versuchen Sie die Einstellung der Breite .c auf 300px. Der Titel ist nicht mehr zentriert. Also ja, damit wird die Frage beantwortet, aber das macht das design.
- Beachten Sie, dass dies nicht immer so, wie Sie erwarten kann, wie wenn es ein .c::after pseudo-element. In meiner Erfahrung margin-left: auto; ist der Weg zu gehen.
- Oder flex-flow: row-reverse;
- Ich sehe das nicht als eine richtige Antwort, wenn Sie wan ' T, um zu richten nur ein Element in einem flex-container.
- Wenn es nur ein element in der container-und der container ist voller Breite die @jchook Antwort am besten funktioniert. .container { display: flex; flex-flow: row-reverse; }
- justify-content: space-between; nur Leerzeichen raus die flex-Kinder. justify-content: flex-end ist die Lösung, die für mich gearbeitet
- Ihre Lösung funktioniert für mich, denn es bleibt auf der rechten Seite, auch wenn es keine flex-Elementen in den container ein.
InformationsquelleAutor Kevin Suttle
987

Mehr flex Ansatz wäre, eine auto linken Rand (flex-Elemente behandeln auto-Margen ein bisschen anders, als wenn in einen block formatting context).
```
.c {
    margin-left: auto;
}
```
Aktualisiert fiddle:

CSS:
```
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
```
HTML:
```
<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="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>
```
- Danke. Würden Sie persönlich bevorzugen diese über Yohann Tilotti display-Tisch-Methode vor? Wenn ja, warum?
- Aus Gründen der Kompatibilität seiner Methode ist besser, aber wenn Sie bereits mit flexbox meine Antwort mehr Sinn machen würde.
- Aus Gründen der Kompatibilität abgesehen dann?
- Beide erreichen die gleiche Sache in diesem Fall. Der Vorteil wäre, dass es andere Eigenschaften (und Verhalten) in Verbindung mit flex-Elemente, die die Tabelle nicht haben (flex, order, etc).
- speed-Leser die note "margin-left: auto" an der rechten, nicht der linken.
- Großen überblick hier stackoverflow.com/a/33856609/385273
- Dies sollte die akzeptierte Antwort. Da justify-content: space-between; nur erreicht, dass Sie wollen, wenn Sie nur 2 items im flex-container (erste Position wäre auf der linken Seite und das zweite wäre das richtige). Aber für mehr als 2 Elemente, zu richten einige auf der rechten Seite, das ist der richtige Ansatz!
- Dies funktioniert besser als die akzeptierte Antwort, wenn Ihre Elemente haben unterschiedliche breiten. justify-content: space-between; alle Elemente haben die gleiche Breite standardmäßig. imgur.com/a/Fhvyh
- Dies funktioniert nicht, wenn Sie mehrere Elemente, die Sie möchten, schweben, auf der rechten Seite, die Elemente, die am Ende ist "spaced out" - irgendwelche Vorschläge ?
- Heilige Scheiße, das hat geklappt. Das ist Magie. @DanielSokolowski ich habe mehrere Elemente, die ich sein wollte, auf der rechten Seite ausgerichtet, so dass ich nur eingewickelt Sie in einem container, und der Anwendung des Stils zu.
- Wenn Sie nicht wickeln Sie die Elemente und Sie müssen die Schwimmer sagen, dass die letzten drei richtige, Ziel ist die 3. einer von den letzten nur mit diesem margin-left: auto; Stil.
- figured it out, keine Notwendigkeit, wickeln Sie Sie - ich konnte nicht in meinem Fall. Die Lösung war das Ziel der 1. der drei Elemente, die nur mit margin-left: auto;.
InformationsquelleAutor Adrift
33

Wenn Sie verwenden möchten flexbox für diese, Sie sollten in der Lage sein, dies zu tun (display: flex auf den container, flex: 1 auf die Elemente, 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), wenn die Gegenstände nicht zu treffen brauchen, können Sie justify-content: space-between auf den Behälter und entfernen Sie die text-align Regeln komplett:
```
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
```
Hier ein demo auf Codepen, damit Sie schnell versuchen, die oben genannten.
- space-between war genau das, was ich suchte, danke!
- Grenzen verschwinden, wenn mit der zweiten Anregung, was man sich erwartet? codepen.io/oshihirii/pen/RygKRd
InformationsquelleAutor Nick F
31

Können Sie auch mit einem Füllstoff zu füllen den übrigen Raum.
```
<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;
}
```
Habe ich aktualisiert, die Lösung mit 3 verschiedenen Versionen. Dies, weil die Diskussion der Gültigkeit der mit einem zusätzlichen Füller-element. Wenn Sie den code ausführen, Schnitt Sie sehen, dass alle Lösungen, die verschiedene Dinge tun. Zum Beispiel die Einstellung der Füllstoff-Klasse auf Position b stellen Sie dieses Element, füllen den übrigen Raum. Dies hat den Vorteil, dass es kein "Toter" Raum, der nicht anklickbar.

HTML:
```
<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>
```
- Endlich mal jemand, der versteht, flexbox
- ja, über eine weitere nicht-semantisches html-element zu bewegen, ein weiteres element ist die Spitze Verständnis flexbox...
- Die anderen Antworten alle schreiben so viel extra css -, dass Sie könnte genauso gut lassen sich die flex-container und code die ganze Sache selbst 🙂
- Raum-zwischen "so viel" css, ernsthaft? Keine Notwendigkeit für weitere Kommentare (aber wenn Sie wollen - willkommen zu chat). Diese Antwort hat sein Recht hier zu sein, denn es wird eine Lösung. Aber auf jeden Fall nicht optimal. Idk, vielleicht hast du nicht bemerkt, aber die meisten css von anderen Antworten sind OP ' s und Antworten tatsächlich reduzieren (ein bisschen) Menge des Autors css. Diese Antwort ist nicht weniger css dann andere (nicht ohne OP css - jsfiddle.net/63ma3b56). Aber es hat eine weitere html-element.
InformationsquelleAutor Arno
26

Oder Sie konnte einfach justify-content: flex-end
```
.main { display: flex; }
.c { justify-content: flex-end; }
```
- Die justify-content Attribut ist ein Attribut der flex-container, siehe Chris Coyer ' s flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox
- Dies ist die einzige Lösung auf dieser Seite, die für mich gearbeitet.
InformationsquelleAutor Melchia

So einfach wie

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

InformationsquelleAutor CESCO

10

Fügen Sie die folgende CSS-Klasse zu Ihrem stylesheet:
```
.my-spacer {
    flex: 1 1 auto;
}
```
Stelle ein leeres element zwischen dem element auf der linken und das element, das Sie wünschen zu Recht-align:

<span class="my-spacer"></span>
- Für diejenigen, die nicht wollen lediglich nach rechts ausrichten, ein einzelnes element, aber vielleicht wollen die linken richten Sie ein element, und rechts ausrichten von einem anderen (innerhalb desselben flex-layout) dies ist der Weg zu gehen!
- Dies ist die beste Antwort.
InformationsquelleAutor andreisrob

Wenn Sie brauchen, ein Element zu Links ausgerichtet werden (wie z.B. der header), aber dann mehrere Elemente rechts ausgerichtet (wie 3 Bilder), dann würden Sie so etwas 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
}

Hier ist, was das Aussehen (nur relavent CSS-wurde in snippet oben)

Wie Rechtsbündig flex-Element?

InformationsquelleAutor TetraDev

5

'justify-content: flex-end" - arbeitete in der Preis-box-container.
```
.price-box {
    justify-content: flex-end;
}
```
InformationsquelleAutor Mohammad Adeel
3

Ich finde, dass das hinzufügen von 'justify-content: flex-end", um die flex-container löst das problem, während 'justify-content: space-between" - nicht tun.

InformationsquelleAutor nights
2

Für diejenigen, die sich mit Winkel-und Flex-Layout, verwenden Sie die folgende auf die flex-item-container:

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

Sehen fxLayoutAlign docs hier und die volle fxLayout docs hier.

InformationsquelleAutor Lindauson

Beispiel-code, basierend auf Antwort von TetraDev

Bilder rechts:

CSS:

* {
  outline: .4px dashed red;
}

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

h1 {
  flex-basis: 100%;
}

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

HTML:

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

CSS:

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

HTML:

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

InformationsquelleAutor 1.21 gigawatts

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.