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>
auto
hier: stackoverflow.com/a/33856609/3597276Antworten:
Daher können Sie
margin-top: auto
den Abstand zwischen den anderen Elementen und dem letzten Element verteilen.Dadurch wird das letzte Element unten positioniert.
p:last-of-type { margin-top: auto; }
Code-Snippet anzeigen
.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: auto
odermargin-right: auto
für die gleiche Ausrichtung horizontal verwenden.p:last-of-type { margin-left: auto; }
Code-Snippet anzeigen
.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>
quelle
margin: 0 auto
für die horizontale Zentrierung. Flexbox-Artikel respektieren den Rand, und ich glaube, dass dadurchmargin: auto
der Artikel im Wesentlichen so weit wie möglich zwischen den Geschwistern positioniert wird. Siehe: w3.org/TR/css-flexbox-1/#auto-marginsmargin: auto
sagt ein Flex-Element, dass es so viel Platz wie möglich in dieser Richtung schaffen soll.Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
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
quelle