Rechtspositionieren von Text in einer Flex-Fußzeile mithilfe von Flex-Eigenschaften

Beim Versuch, Text in einem Flex-Container mithilfe der Float-Eigenschaft rechtsbündig auszurichten , können Probleme auftreten. Dies liegt daran, dass die Float-Eigenschaft in Flex-Containern nicht unterstützt wird.

Gemäß der Flexbox-Spezifikation erzeugen „Float“ und „Clear“ kein Floating oder Clearing des Flex-Elements und bringen es nicht aus dem Fluss. " Stattdessen wird ein neuer „Flex-Formatierungskontext“ für seinen Inhalt erstellt, was bedeutet, dass Floats ignoriert werden und Ränder nicht mit dem Inhalt des Containers zusammenfallen.

Um Text in einer Fußzeile, die auf flexible Anzeige eingestellt ist, rechts zu positionieren, Verwenden Sie stattdessen Flex-Eigenschaften. Die Eigenschaft justify-content kann verwendet werden, um Elemente innerhalb des Containers horizontal auszurichten. Zum Beispiel im bereitgestellten Code-Snippet:

footer {
    display: flex;
    justify-content: flex-end;
}

Dieser Code richtet den Bereich, der den „foo link“-Text im Fußzeilenelement enthält, rechtsbündig aus.