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>

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

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

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

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

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

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