Wie richte ich ein einzelnes Element mit Flexbox rechts aus?

Ein Element mit Flexbox richtig ausrichten

Um die Frage der richtigen Ausrichtung eines Elements innerhalb eines Flexbox-Layouts zu beantworten, werden die bereitgestellten HTML- und CSS-Codes bereitgestellt Präsentieren Sie ein grundlegendes Flexbox-Setup, bei dem zwei Elemente links und ein Element rechts innerhalb eines positioniert werden Container.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

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

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

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

.result div {
  float: left;
}

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

Flexbox-Ansatz

Um ein untergeordnetes Element rechts auszurichten, legen Sie es mit margin-left: auto; fest. Dadurch wird die Eigenschaft „Automatischer Rand“ in der Hauptachse genutzt, die zum Unterteilen flexibler Elemente in verschiedene Gruppen nützlich ist.

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

Aktualisierte Fiddle

Eine aktualisierte JSFiddle zeigt dies effektiv vorgehen:

[Aktualisiert Fiddle](https://jsfiddle.net/vhem8scs/)

Im aktualisierten CSS ist der margin-left: auto; Die Eigenschaft wird auf das letzte div-Element im .wrap-Container angewendet, wodurch es rechtsbündig ausgerichtet wird.

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