Position letzten flex-Element am Ende des Containers
Diese Frage betrifft einen browser mit vollständige css3-Unterstützung einschließlich der flexbox.
Ich habe ein flex-container mit einigen Elementen in es. Sie sind alle gerechtfertigt flex-start, aber ich will die letzten .end
Element, um gerechtfertigt werden zu flex-end. Ist es ein guter Weg, dies zu tun, ohne änderung der HTML-und ohne Rückgriff auf absolute Positionierung?
CSS:
.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;
}
HTML:
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="end"></p>
</div>
- Ja. Sehen
auto
Marge Abbildungen hier: stackoverflow.com/a/33856609/3597276
Du musst angemeldet sein, um einen Kommentar abzugeben.
Daher könnten Sie
margin-top: auto
zu verteilen, der Raum zwischen die anderen Elemente und das Letzte element. Diese position wird das element an der Unterseite.Können Sie auch vermeiden, die Verwendung einer Klasse und nutzen die
:last-of-type
/last-child
pseudo-Klasse.CSS:
HTML:
margin: 0 auto
für die horizontale Zentrierung. Flexbox-Elemente hinsichtlich der Marge, und ich glaube, dassmargin: auto
wird im wesentlichen die position, die das Element mit möglichst viel Platz zwischen die Geschwister wie möglich. Siehe: w3.org/TR/css-flexbox-1/#auto-marginsmargin: auto
auf einem flex-Element, sagt er, um soviel Raum wie möglich in diese Richtung.Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
flex-grow: 1;
auf das Letzte element vor dem letzten Element zu positionieren, am Ende, behebt es.margin-top: auto
auf den oberen block sowie die unteren.Das flexbox-Prinzip funktioniert auch horizontal
Während der Berechnung der flex-Basen und flexible Längen, auto-Margen
werden wie 0 behandelt.
Vor der Ausrichtung via begründen-Inhalt und
align-self, alle positiven freien Speicherplatz verteilt sich auf auto-Ränder in
diese dimension.
Einstellung eine automatische linken Rand für den Letzten Punkt wird die Arbeit zu tun.
- Code Beispiel:
CSS:
HTML:
Codepen Snippet
Dies kann sehr nützlich für Desktop-Fußzeilen.
Als Envato hat hier mit dem Firmen-logo.
Codepen Snippet