Wie kann ich ein Flexbox-Element rechtsbündig ausrichten, während andere linksbündig bleiben?

Flexbox-Elemente ausrichten: Rechtsbündige Option

Frage:

Ist das im Zusammenhang mit Flexbox möglich? Zwei Elemente links und ein Element rechts ausrichten? Eine visuelle Darstellung finden Sie unter dem bereitgestellten JSFiddle-Link.

Antwort:

Um eine rechte Ausrichtung für ein Flex-Child zu erreichen, legen Sie dessen margin-left: auto; fest.

Gemäß der Flex-Spezifikation:

Automatische Ränder auf der Hauptachse können verwendet werden, um Flex-Elemente in verschiedene zu unterteilen „Gruppen“. Dies ermöglicht die Erstellung von UI-Mustern wie Aktionsleisten, wobei einige Elemente links und andere rechts ausgerichtet sind.

Daher richtet das folgende CSS das letzte div-Element im bereitgestellten Beispiel rechts aus:

.wrap div:last-child {
  margin-left: auto;
}

Durch die Kombination dieser Technik mit Ihren vorhandenen Flexbox-Stilen können Sie das gewünschte Layout erreichen, ohne dass mehrere Codeblöcke erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Flexbox-Element rechtsbündig ausrichten, während andere linksbündig bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!