Wie man ein einzelnes Flexbox-Element rechtfertigt (justify-content überschreiben)

Question

Sie können align-items mit align-self für ein Flex-Element überschreiben. Ich suche nach einer Möglichkeit, justify-content für ein Flex-Element zu überschreiben.

Wenn Sie einen Flexbox-Container mit justify-content:flex-end haben, aber das erste Element mit justify-content:flex-start haben möchten, wie könnte das erreicht werden?

Answer 1

Es scheint kein justify-self zu geben, aber Sie können ein ähnliches Ergebnis erzielen, indem Sie den entsprechenden margin auf auto setzen¹. Zum Beispiel für flex-direction: row (Standard) sollten Sie margin-right: auto setzen, um das Kind links auszurichten.

.container {
  height: 100px;
  border: solid 10px skyblue;

  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

  justify-start

¹ Dieses Verhalten ist durch die Flexbox-Spezifikation definiert.

Answer 2

Soweit ich weiß, gibt es dafür keine Eigenschaften in den Spezifikationen, aber hier ist ein Trick, den ich benutze: Setzen Sie das Container-Element (das mit display:flex) auf justify-content:space-around. Fügen Sie dann ein zusätzliches Element zwischen dem ersten und dem zweiten Element hinzu und setzen Sie es auf flex-grow:10 (oder einen anderen Wert, der für Ihr Setup funktioniert)

Bearbeiten: Wenn die Elemente eng ausgerichtet sind, ist es eine gute Idee, auch flex-shrink: 10; zum zusätzlichen Element hinzuzufügen, damit das Layout auf kleineren Geräten richtig reagiert.

Answer 3

Wenn Sie tatsächlich nicht darauf beschränkt sind, alle diese Elemente als Geschwisternodes zu behalten, können Sie diejenigen, die zusammengehören, in einem anderen Standard-Flex-Container zusammenfassen und den Container beider mit space-between verwenden.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

  1

    2
    3
    4
    5

Oder wenn Sie dasselbe mit flex-start und flex-end umgekehrt machen, tauschen Sie einfach die Reihenfolge des default-flex-Containers und des einzelnen Kindelements aus.

Answer 4

Ich habe einen ähnlichen Fall gelöst, indem ich den Stil des inneren Elements auf margin: 0 auto gesetzt habe.
Situation: Mein Menü enthält normalerweise drei Schaltflächen, in diesem Fall müssen sie justify-content: space-between sein. Aber wenn es nur eine Schaltfläche gibt, wird sie jetzt zentriert und nicht mehr linksbündig angezeigt.

Answer 5

Für die Situationen, in denen die Breite der Elemente, die Sie auf flex-end setzen möchten, bekannt ist, können Sie ihren Flex auf "0 0 ##px" setzen und das Element, das Sie auf flex-start setzen möchten, mit flex:1 festlegen.

Dadurch wird das Pseudoelement flex-start den Container füllen, einfach das Format auf text-align:left oder was auch immer ändern.