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

Um Pavlos Antwort zu erläutern https://stackoverflow.com/a/34063808/1069914, können Sie mehrere Unterelemente justify-content: flex-start haben, die sich in ihrem Verhalten ähneln, aber das letzte Element justify-content: flex-end haben.

.container {
  height: 100px;
  border: solid 10px skyblue;
  display: flex;
  justify-content: flex-end;
}

.container > *:not(:last-child) {
    margin-right: 0;
    margin-left: 0;
}

/* set the second to last-child */
.container > :nth-last-child(2) {
    margin-right: auto;
    margin-left: 0;
}

.block {
  width: 50px;
  background: tomato;
  border: 1px solid black;
}

    Ich sollte am Ende des flex containers sein (d. h. justify-content: flex-end)