Heim >Web-Frontend >CSS-Tutorial >Wie richte ich ein Flexbox-Element rechts aus?

Wie richte ich ein Flexbox-Element rechts aus?

Linda Hamilton
Linda HamiltonOriginal
2024-12-14 09:22:11450Durchsuche

How Do I Right-Align a Flexbox Item?

Wie kann ich ein Element mit Flexbox rechts ausrichten?

In Flexbox können Sie den Rand links einstellen: auto; Eigenschaft, um ein Element nach rechts auszurichten.

In der Flexbox-Spezifikation heißt es:

„Eine Verwendung von automatischen Rändern in der Hauptachse besteht darin, flexible Elemente
in verschiedene „Gruppen“ zu unterteilen. Das folgende Beispiel zeigt, wie Sie damit
ein allgemeines UI-Muster reproduzieren können – eine einzelne Aktionsleiste, wobei einige
auf der linken Seite und andere auf der linken Seite ausgerichtet sind richtig.“

Hier ist ein aktualisierter Codeausschnitt:

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

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

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

Die aktualisierte Geige unten zeigt die Ausrichtung:

[Geigendemo](https://jsfiddle.net /vhem8scs/)

Das obige ist der detaillierte Inhalt vonWie richte ich ein Flexbox-Element rechts aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn