Gibt es eine flexiblere Möglichkeit, "Kontakt" nach 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; }
<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>
Bitte schön. Setzen Sie 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; }
<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>
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.
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>