So rechtfertigen Sie ein einzelnes Flexbox-Element (überschreiben Sie den Rechtfertigungsinhalt)

283

Sie können align-itemsmit align-selffür ein flexibles Element überschreiben . Ich suche nach einer Möglichkeit, justify-contenteinen Flex-Artikel zu überschreiben .

Wenn Sie einen Flexbox-Container mit hatten justify-content:flex-end, aber den ersten Artikel haben möchten justify-content: flex-start, wie könnte das gemacht werden?

Dies wurde am besten durch diesen Beitrag beantwortet: https://stackoverflow.com/a/33856609/269396

css flexbox Mahks
quelle
2
Verwenden Sie autoRänder. Siehe Feld Nr. 26 hier: stackoverflow.com/a/33856609/3597276
Michael Benjamin
Vielen Dank für den Link zur hilfreichsten Antwort!
Brady Dowling

Antworten:

547

Es scheint keine zu geben justify-self, aber Sie können eine ähnliche Ergebniseinstellung erzielen, die marginfür auto¹ geeignet ist . Z.B. Für flex-direction: row(Standard) sollten Sie festlegen margin-right: auto, dass das untergeordnete Element links ausgerichtet wird.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>
Erweitern Sie das Snippet

¹ Dieses Verhalten wird durch die Flexbox-Spezifikation definiert .

Pavlo
quelle
51
Diese Technik ist ausgezeichnet und funktioniert auch in vertikaler Richtung. Sie möchten beispielsweise, dass das letzte Element in einem Container mit fester Höhe am Boden haftet. Sie können `` `.container {flex-direction: column; Rechtfertigungsinhalt: Flex-Start} .last-item {Rand-oben: Auto} `` `
Christian Schlensker
6
@krulik Dieses Verhalten wird durch die Flexbox-Spezifikation definiert, siehe w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins
Pavlo
6
Nach einigen weiteren Nachforschungen hat das justify-selfvielleicht nichts damit zu tun flexbox, sondern wird verwendet, css gridsaber ich bin mir nicht sicher. Ich kann nicht scheinen, dass es in Chrome mit Flexbox funktioniert.
Jake Wilson
8
Was ist, wenn ich möchte, dass sich ein Element links und das andere in der Mitte befindet?
Fahmi
3
"In Flexbox-Layouts wird diese Eigenschaft ignoriert" - entnommen aus den Mozilla-Dokumenten zu Rechtfertigung
Finlay Percy
19

AFAIK gibt es keine Eigenschaft dafür in den Spezifikationen, aber hier ist ein Trick, den ich verwendet habe: Setzen Sie das Containerelement (das mit display:flex) auf justify-content:space-around Dann fügen Sie ein zusätzliches Element zwischen dem ersten und dem zweiten Element hinzu und setzen Sie es auf flex-grow:10(oder einige) anderer Wert, der mit Ihrem Setup funktioniert)

Bearbeiten: Wenn die Elemente eng ausgerichtet sind, empfiehlt es sich, auch flex-shrink: 10;das zusätzliche Element hinzuzufügen , damit das Layout auf kleineren Geräten ordnungsgemäß reagiert.

Eeglbalazs
quelle
1
Es funktioniert ohne Angabe der Breite (zumindest in meiner Situation)
eeglbalazs
Versuchen Siemin-width: 0
The Dembinski
13

Wenn Sie nicht darauf beschränkt sind, alle diese Elemente als Geschwisterknoten beizubehalten, können Sie diejenigen, die zusammen gehören, in eine andere Standard-Flexbox einbinden und den Container beider Elemente zwischen Leerzeichen verwenden lassen.

.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;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>
Erweitern Sie das Snippet

Oder wenn Sie dasselbe mit umgekehrtem Flex-Start und Flex-End gemacht haben, tauschen Sie einfach die Reihenfolge des Standard-Flex-Containers und des einsamen Kindes aus.

Borkxs
quelle
5

Es scheint justify-self, als käme es bald in die Browser . Es gibt bereits einen Artikel über MDN . Zum Zeitpunkt dieses Schreibens ist die Browserunterstützung schlecht.

Zur Margin-Lösung: Ich habe ein Flexbox-Raster mit Lücken. Es gibt flex-gap(noch?) Keine Eigenschaft mit Flexbox. Für die Dachrinnen verwende ich Polster und Ränder, daher margin: automüssen die anderen Ränder überschrieben werden ...

Frank Lämmer
quelle
7
LeiderIn flexbox layouts, this property is ignored
Sphinxxx
1
@Sphinxxx Ja, justify-self funktioniert aber in einem display: gridContainer. Es ist kürzlich wie Flexbox ermöglicht so reiche Positionierung wie align-items, align-selfsowie einige zusätzliche Funktionen wie die, die wir brauchen hier justify-self. Was ich empfehle, ist die Verwendung von Flexbox, wo immer dies ausreicht. Wenn jedoch etwas fehlt, hat Grid höchstwahrscheinlich das, wonach Sie suchen. (z. B. einfaches Ausrichten eines untergeordneten Elements an Center-X und Center-Y und eines anderen an Rechts-X Center-Y - Flexbox hat margin-left: autofür einfaches Links + Rechts, aber nicht Mitte + Rechts) Beispiel: stackoverflow.com/a/57128453 / 2441655
Venryx
1

Für Situationen , in denen Breite der Elemente , die Sie tun , um flex-endbekannt ist, können Sie ihre flex auf „0 0 ## px“ gesetzt und stellen Sie das Element , das Sie wollen flex-startmitflex:1

Dies führt dazu, dass das Pseudoelement flex-startden Container füllt. Formatieren Sie es einfach auf text-align:leftoder was auch immer.

Mahks
quelle
0

Ich habe einen ähnlichen Fall gelöst, indem ich den Stil des inneren Elements auf gesetzt habe margin: 0 auto.
Situation: Mein Menü enthält normalerweise drei Schaltflächen. In diesem Fall müssen sie vorhanden sein justify-content: space-between. Wenn es jedoch nur eine Schaltfläche gibt, wird diese jetzt in der Mitte anstatt links ausgerichtet.

Micros
quelle