Robin hat das schon mal behandelt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person versucht hat, es zu erklären, und ich wollte mich dem anschließen.
Nehmen wir an, Sie haben einen Flex-Container mit einigen Flex-Elementen darin, die nicht den gesamten Bereich ausfüllen.
Siehe den Pen
ZEYLVEX von Chris Coyier (@chriscoyier)
auf CodePen.
Jetzt möchte ich dieses „Menü“-Element ganz nach rechts schieben. Hier kommen Auto-Ränder ins Spiel. Wenn ich ihm margin-left: auto; gebe, wird es in dieser Zeile so weit wie möglich weggedrückt.
Siehe den Pen
WNbRLbG von Chris Coyier (@chriscoyier)
auf CodePen.
Eigentlich könnten Sie stattdessen margin-inline-start: auto; in Betracht ziehen und logische Eigenschaften überall verwenden, damit Sie gut aufgestellt sind, falls Sie die Richtung ändern müssen.
Siehe den Pen
gObgZpb von Chris Coyier (@chriscoyier)
auf CodePen.
Beachten Sie auch, dass Auto-Ränder in beide Richtungen funktionieren, solange Platz zum Verschieben vorhanden ist. In diesem Beispiel ist es nicht die Ausrichtung, die das Menü nach unten bewegt, sondern ein automatischer Rand.
Siehe den Pen
XWJpobE von Chris Coyier (@chriscoyier)
auf CodePen.
Ein interessanter Sonderfall ist, wenn mehrere Flex-Kinder „auto“-Ränder haben — der verbleibende Platz wird gleichmäßig zwischen ihnen verteilt.
Versuchen Sie ein Beispiel mit vier Kindern, bei dem das dritte Kind
margin-left: autohat und das vierte Kindmargin-left: autoundmargin-right: autohat.Oder ein Beispiel mit vier Kindern, bei dem das dritte Kind sowohl
margin-left: autoals auchmargin-right: autohat — das Ergebnis ist, dass das dritte Kind im verbleibenden Platz zentriert ist, während das vierte Kind gemäßflex-directionam Ende der Inline-Box platziert wird.Ich bin neu in Flexbox, aber das ergibt für mich wirklich Sinn
Wenn ich mir das von Ihnen gegebene Beispiel ansehe, scheint es genauso zu funktionieren wie
justify-content: space-between;. Kann dies anstelle davon verwendet werden?Das! Ich habe es für ein 4-Spalten-Blog-Layout verwendet, damit alle 4 Spalten die gleiche Höhe haben.
Haben Sie Hinweise, wann Sie diese Methode im Gegensatz zur Verwendung von Ausrichtungseigenschaften verwenden sollten? (zum Beispiel
align-self: flex-end)In meiner einfachen Demo bewirkt es dasselbe!