Positionieren Sie den letzten Flexartikel am Ende des Behälters

103

Diese Frage betrifft einen Browser mit vollständiger CSS3-Unterstützung einschließlich Flexbox.

Ich habe einen flexiblen Behälter mit einigen Gegenständen. Sie sind alle zum Flex-Start berechtigt, aber ich möchte, dass der letzte .end Punkt zum Flex-End gerechtfertigt ist. Gibt es eine gute Möglichkeit, dies zu tun, ohne den HTML-Code zu ändern und ohne auf die absolute Positionierung zurückzugreifen?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

George Mauer
quelle
2
Ja. Siehe Randabbildungenauto hier: stackoverflow.com/a/33856609/3597276
Michael Benjamin
Mögliches Duplikat von Richten Sie ein Element mit flexbox nach unten aus
mfluehr

Antworten:

217

Flexibles Box-Layout-Modul - 8.1. An automatischen Rändern ausrichten

Automatische Ränder für Flex-Elemente haben einen ähnlichen Effekt wie automatische Ränder im Blockfluss:

  • Bei der Berechnung von Flexbasen und flexiblen Längen werden automatische Ränder als 0 behandelt.

  • Vor der Ausrichtung über justify-contentund align-selfwird jeder positive freie Speicherplatz an die automatischen Ränder in dieser Dimension verteilt.

Daher können Sie margin-top: autoden Abstand zwischen den anderen Elementen und dem letzten Element verteilen.

Dadurch wird das letzte Element unten positioniert.

p:last-of-type {
  margin-top: auto;
}

vertikales Beispiel


Ebenso können Sie auch margin-left: autooder margin-right: autofür die gleiche Ausrichtung horizontal verwenden.

p:last-of-type {
  margin-left: auto;
}

horizontales Beispiel

Josh Crozier
quelle
1
ah perfekt, kann nicht glauben, dass ich das verpasst habe! Besonders peinlich, da ich den Trick, den Rand automatisch zu zentrieren , total kenne und ihn die ganze Zeit benutze
George Mauer
1
@ j08691 Ich habe keine formale Erklärung, warum es funktioniert, aber es ähnelt der Verwendung margin: 0 autofür die horizontale Zentrierung. Flexbox-Artikel respektieren den Rand, und ich glaube, dass dadurch margin: autoder Artikel im Wesentlichen so weit wie möglich zwischen den Geschwistern positioniert wird. Siehe: w3.org/TR/css-flexbox-1/#auto-margins
Josh Crozier
2
@ jo8691 Wenn ich mich nicht irre, margin: autosagt ein Flex-Element, dass es so viel Platz wie möglich in dieser Richtung schaffen soll.
George Mauer
1
Die Spezifikation sagt Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
George Mauer
Ich versuche, mehr über Flexbox zu erfahren, daher wäre es großartig, eine Referenz zu sehen, die dieses Verhalten beschreibt. Insbesondere, dass es auch beabsichtigt ist und keine Eigenart oder Nebenwirkung.
j08691
61

Dieses Flexbox-Prinzip funktioniert auch horizontal

Bei der Berechnung von Flex-Basen und flexiblen Längen werden automatische Ränder als 0 behandelt.
Vor der Ausrichtung über Rechtfertigungsinhalt und Ausrichtung selbst wird jeder positive freie Speicherplatz auf automatische Ränder in dieser Dimension verteilt.

Das Festlegen eines automatischen linken Randes für das letzte Element erledigt die Arbeit.

.last-item {
  margin-left: auto;
}

Codebeispiel:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Codepen-Snippet

Dies kann für Desktop-Fußzeilen sehr nützlich sein.

Wie Envato hier mit dem Firmenlogo.

Codepen-Snippet

David Ben Dahan
quelle
3
Unsicher, warum das tatsächlich funktioniert, aber es hat mir bei einem Projekt geholfen.
Louis345
4
Was ist, wenn ich brauche, dass alle Gegenstände in der Mitte und der letzte auf der rechten Seite sind?
Illorian