CSS richtet ein Element rechts mit der Flexbox aus

212

Ist es möglich, zwei Elemente links und ein Element rechts an der Flexbox auszurichten? Der Link zeigt es deutlicher. Das letzte Beispiel ist das, was ich erreichen möchte.

In der Flexbox habe ich einen Codeblock. Mit float habe ich vier Codeblöcke. Das ist ein Grund, warum ich Flexbox bevorzuge.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

css alignment flexbox Jens Törnell
quelle

stackoverflow.com/a/33856609/3597276

Michael Benjamin

Antworten:

523

Um ein Flex-Kind nach rechts auszurichten, stellen Sie es mit einmargin-left: auto;

Aus der Flex-Spezifikation :

Eine Verwendung von automatischen Rändern in der Hauptachse besteht darin, Flex-Elemente in verschiedene "Gruppen" zu unterteilen. Das folgende Beispiel zeigt, wie Sie damit ein allgemeines UI-Muster reproduzieren können - eine einzelne Aktionsleiste, von der einige links und andere rechts ausgerichtet sind.

.wrap div:last-child {
  margin-left: auto;
}

Geige aktualisiert

Code-Snippet anzeigen

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Erweitern Sie das Snippet

Hinweis:

Sie können einen ähnlichen Effekt erzielen, indem Sie Flex-Grow einstellen: 1 für das mittlere Flex-Element (oder die Kurzschrift flex:1), wodurch das letzte Element ganz nach rechts verschoben wird. ( Demo )

Der offensichtliche Unterschied besteht jedoch darin, dass das mittlere Element größer wird, als es möglicherweise sein muss. Fügen Sie den Flex-Elementen einen Rahmen hinzu, um den Unterschied zu erkennen.

Demo

Code-Snippet anzeigen

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Erweitern Sie das Snippet

Danield
quelle

Vielen Dank! Ich habe eine andere Sache ausprobiert, die funktioniert hat, bevor ich sie gelesen habe. Es sollte Flex-Grow gesetzt werden: 1 auf das Element, das das andere drücken sollte. Es hat auch funktioniert. Wissen Sie, welche von ihnen besser sind und warum?

Jens Törnell

Gute Antwort. Der Rand nimmt also keinen zusätzlichen Platz ein, und der Flex: 1 tut dies. Cool!

Jens Törnell

@ JensTörnell, der autoRand verwendet den leeren Raum im Container, um die Flex-Elemente zu trennen. Die Eigenschaft flex-grow/ flexnimmt diesen leeren Raum und gibt ihn an das Flex-Element weiter, das um diesen Betrag erweitert wird. Wie von Danield erwähnt, vergrößert die letztere Methode das Flex-Element ZWEI, was Sie möglicherweise nicht möchten.

Michael Benjamin

Nicht alle Helden tragen Umhänge.

Tom

@ user1063287 Um mehrere Elemente nach rechts auszurichten, wenden Sie einfach margin-left: auto auf das erste Element an, das nach rechts ausgerichtet werden muss. Nehmen wir also an, Sie möchten, dass die letzten 4 Elemente rechts ausgerichtet werden. div:nth-last-child(4) { margin-left: auto } Codepen.io/danield770/pen/ERyoar

Danield

Gruppieren Sie für eine knappe, reine Flexbox-Option die linksbündigen und die rechtsbündigen Elemente:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

und verwenden space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

Auf diese Weise können Sie mehrere Elemente rechts (oder nur eines) gruppieren.

https://jsfiddle.net/c9mkewwv/3/

spflow
quelle

Dies funktioniert, aber wenn Sie die Elemente in jeder Gruppe nicht so ändern, dass sie display: inline;oder sind display: inline-block;, werden sie gestapelt, anstatt alle in einer Reihe, wie dies bei Flexbox der Fall wäre.

Der DIMM Reaper

@ TheDIMMReaper Ich bin nicht sicher, ob ich das Problem sehe. Könnten Sie erweitern?

Spflow

Ich meine nur, wie Sie die Tags geändert haben, die sofort umbrochen wurden, Oneund Twovon divs nach spans - wenn sie noch display: block;wären, würden sie in separate Zeilen fließen. Da das OP ursprünglich divs hatte, wollte ich nur darauf hinweisen, dass das einfache Einfügen in ein anderes divnicht funktionieren würde, ohne die Anzeige der ursprünglichen Tags zu ändern.

Der DIMM Reaper

Ja, da die Elemente jetzt eine Ebene tiefer liegen, display: flexhat dies keinen Einfluss mehr auf ihr Layout. Wenn Sie divs verwenden möchten, ja, inlineoder inline-blockwürde funktionieren. Aber natürlich auch flex, da wir es bereits für die Standardeinstellung flex-direction: rowmit übergeordneten Divs verwenden. Ex. jsfiddle.net/ynbb5964/2

spflow

Danke, ich habe Align-Self: Flex-End ausprobiert, aber warum funktioniert es nicht?

Anand

Zum Ausrichten einiger Elemente (headerElement) in der Mitte und des letzten Elements rechts (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}

Satvik Vats
quelle