CSS ein Element mit Flexbox rechts ausrichten

https://jsfiddle.net/vhem8scs/

Ist es möglich, mit Flexbox zwei Elemente links und ein Element rechts auszurichten? Der Link zeigt es deutlicher. Das letzte Beispiel ist das, was ich erreichen möchte.

Bei flexbox habe ich einen Code-Block. Mit float habe ich vier Codeblöcke. Das ist ein Grund, warum ich flexbox bevorzuge.

HTML

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

<!-- DESIRED RESULT -->

<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;
}
Programmierung
css alignment flexbox
8. Februar 2016 в 12:41
2 Aufrufe
Lösung

Um ein Flex Child nach rechts auszurichten, setzen Sie es mit margin-left: auto;

Aus der flex spec:

Eine Verwendung von auto margins in der Hauptachse ist die Trennung von flex-Elementen in verschiedene "Gruppen". Das folgende Beispiel zeigt, wie man dies nutzen kann, um ein gängiges UI-Muster zu reproduzieren - eine einzelne Leiste von Aktionen mit einigen links und andere rechts ausgerichtet sind.

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

[Updated fiddle][2]

.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;
}
<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>

Anmerkung:

Sie könnten einen ähnlichen Effekt erzielen, indem Sie flex-grow:1 auf das mittlere flex-Element setzen (oder die Abkürzung flex:1), was das letzte Element ganz nach rechts schieben würde. ([Demo][3])

Der offensichtliche Unterschied ist jedoch, dass das mittlere Element größer wird, als es eigentlich sein müsste. Fügen Sie einen Rahmen zu den flexiblen Elementen hinzu, um den Unterschied zu sehen.

[Demo][4]

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}
<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

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


<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
Danield
Bearbeitete Antwort 8. Februar 2016 в 3:38
Kommentare (7)

Für eine knappe, reine Flexbox-Option gruppieren Sie die links ausgerichteten Elemente und die rechts ausgerichteten Elemente:

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

und verwenden Sie space-between:

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

Auf diese Weise können Sie mehrere Elemente rechts gruppieren (oder nur eines).

https://jsfiddle.net/c9mkewwv/3/

Kommentare (6)

Um einige Elemente (headerElement) in der Mitte und das letzte Element rechts (headerEnd) auszurichten.

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}
Kommentare (0)