Warum gibt es in CSS Flexbox keine Eigenschaften für "Elemente rechtfertigen" und "Selbst rechtfertigen"?

Betrachten Sie die Hauptachse und die Querachse eines Flexcontainers:

                                                                                                                                                   _{Quelle: W3C}

Zum Ausrichten von Flex-Elementen entlang der Hauptachse gibt es eine Eigenschaft:

• justify-content

Zum Ausrichten von Flex-Elementen entlang der Querachse gibt es drei Eigenschaften:

• align-content
• align-items
• align-self

Im obigen Bild ist die Hauptachse horizontal und die Querachse vertikal. Dies sind die Standardrichtungen eines Flex-Containers.

Diese Richtungen können jedoch leicht mit der flex-directionEigenschaft ausgetauscht werden .

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(Die Querachse ist immer senkrecht zur Hauptachse.)

Mein Punkt bei der Beschreibung der Arbeit der Achsen ist, dass an beiden Richtungen nichts Besonderes zu sein scheint. Hauptachse, Querachse, beide sind gleich wichtig und flex-directionerleichtern das Hin- und Herwechseln.

Warum erhält die Querachse zwei zusätzliche Ausrichtungseigenschaften?

Warum werden align-contentund werden align-itemsfür die Hauptachse eine Eigenschaft zusammengefasst?

Warum bekommt die Hauptachse keine justify-selfEigenschaft?

Szenarien, in denen diese Eigenschaften nützlich wären:

• Platzieren eines Flex-Elements in der Ecke des Flex-Containers
  #box3 { align-self: flex-end; justify-self: flex-end; }

• Ausrichten einer Gruppe von Flex-Elementen nach rechts ausrichten ( justify-content: flex-end), aber Ausrichten des ersten Elements nach links ausrichten ( justify-self: flex-start)

  Stellen Sie sich einen Kopfbereich mit einer Gruppe von Navigationselementen und einem Logo vor. Mit justify-selfdem Logo links ausgerichtet werden könnte , während die nav Artikel ganz rechts, und das Ganze paßt glatt ( „verbiegt“) an verschiedenen Bildschirmgrößen bleiben.

• Befestigen Sie in einer Reihe von drei flexiblen Elementen das mittlere Element in der Mitte des Behälters ( justify-content: center) und richten Sie die benachbarten Elemente an den Behälterkanten ( justify-self: flex-startund justify-self: flex-end) aus.

  Beachten Sie, dass Werte space-aroundund space-betweenauf justify-contentEigenschaft nicht das mittlere Element halten zentriert um den Behälter , wenn die benachbarten Elemente unterschiedliche Breiten aufweisen.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle-Version

Zum jetzigen Zeitpunkt gibt es keine Erwähnung von justify-selfoder justify-itemsin der Flexbox-Spezifikation .

Im CSS-Box-Ausrichtungsmodul , dem unvollendeten Vorschlag des W3C, einen gemeinsamen Satz von Ausrichtungseigenschaften für alle Boxmodelle festzulegen, gibt es jedoch Folgendes:

                                                                                                                                                   _{Quelle: W3C}

Sie werden das bemerken justify-selfund justify-itemswerden in Betracht gezogen ... aber nicht für Flexbox .

Abschließend möchte ich noch die Hauptfrage wiederholen:

Warum gibt es keine Eigenschaften "Elemente rechtfertigen" und "Selbst rechtfertigen"?

Methoden zum Ausrichten von Flex-Elementen entlang der Hauptachse

Wie in der Frage angegeben:

Zum Ausrichten von Flex-Elementen entlang der Hauptachse gibt es eine Eigenschaft: justify-content

Um align flex Elemente entlang der Querachse gibt es drei Eigenschaften: align-content, align-itemsundalign-self .

Die Frage lautet dann:

Warum gibt es keine justify-itemsund justify-selfEigenschaften?

Eine Antwort könnte sein: Weil sie nicht notwendig sind.

Die Flexbox-Spezifikation bietet zwei Methoden zum Ausrichten von Flex-Elementen entlang der Hauptachse:

1. Die justify-contentSchlüsselworteigenschaft und
2. auto Ränder

Inhalt rechtfertigen

Die justify-contentEigenschaft richtet Flex-Elemente entlang der Hauptachse des Flex-Containers aus.

Es wird auf den Flex-Container angewendet, wirkt sich jedoch nur auf Flex-Elemente aus.

Es gibt fünf Ausrichtungsoptionen:

• flex-start ~ Flex-Artikel werden am Anfang der Linie verpackt.

  

• flex-end ~ Flex-Artikel werden gegen Ende der Linie verpackt.

  

• center ~ Flex-Artikel werden zur Mitte der Linie gepackt.

  

• space-between~ Flex-Elemente sind gleichmäßig verteilt, wobei das erste Element an einer Kante des Containers und das letzte Element an der gegenüberliegenden Kante ausgerichtet ist. Die Kanten der ersten und letzten Elemente verwendet , ist abhängig von flex-directionund Schreibmodus ( ltroder rtl).

  

• space-around~ Wie space-betweenaußer mit halbgroßen Zwischenräumen an beiden Enden.

  

Automatische Ränder

Mit autoRändern können flexible Elemente zentriert, beabstandet oder in Untergruppen gepackt werden.

Im Gegensatz justify-contentzu Flex-Containern werden autoRänder für Flex-Elemente verwendet.

Sie verbrauchen den gesamten freien Speicherplatz in der angegebenen Richtung.

Richten Sie die Gruppe der Flex-Elemente rechts, aber das erste Element links aus

Szenario aus der Frage:

• Ausrichten einer Gruppe von Flex-Elementen nach rechts ausrichten ( justify-content: flex-end), aber Ausrichten des ersten Elements nach links ausrichten ( justify-self: flex-start)

  Stellen Sie sich einen Kopfbereich mit einer Gruppe von Navigationselementen und einem Logo vor. Mit justify-selfdem Logo links ausgerichtet werden könnte , während die nav Artikel ganz rechts, und das Ganze paßt glatt ( „verbiegt“) an verschiedenen Bildschirmgrößen bleiben.

Andere nützliche Szenarien:

Legen Sie einen flexiblen Gegenstand in die Ecke

Szenario aus der Frage:

• Platzieren eines flexiblen Elements in einer Ecke .box { align-self: flex-end; justify-self: flex-end; }

Zentrieren Sie ein flexibles Element vertikal und horizontal

margin: autoist eine Alternative zu justify-content: centerund align-items: center.

Anstelle dieses Codes auf dem Flex-Container:

.container {
    justify-content: center;
    align-items: center;
}

Sie können dies für das Flex-Element verwenden:

.box56 {
    margin: auto;
}

Diese Alternative ist nützlich, wenn Sie ein flexibles Element zentrieren, das über den Container läuft .

Zentrieren Sie ein Flex-Element und zentrieren Sie ein zweites Flex-Element zwischen dem ersten und der Kante

Ein Flex-Container richtet Flex-Elemente aus, indem er freien Speicherplatz verteilt.

Um ein gleiches Gleichgewicht zu schaffen , so dass ein mittlerer Gegenstand mit einem einzelnen Gegenstand daneben im Behälter zentriert werden kann, muss ein Gegengewicht eingeführt werden.

In den folgenden Beispielen werden unsichtbare dritte Flex-Elemente (Felder 61 und 68) eingeführt, um die "echten" Elemente (Feld 63 und 66) auszugleichen.

Natürlich ist diese Methode semantisch nicht besonders gut.

Alternativ können Sie ein Pseudoelement anstelle eines tatsächlichen DOM-Elements verwenden. Oder Sie können die absolute Positionierung verwenden. Alle drei Methoden werden hier behandelt: Flex-Elemente zentrieren und unten ausrichten

HINWEIS: Die obigen Beispiele funktionieren - in Bezug auf die echte Zentrierung - nur, wenn die äußersten Elemente gleich hoch / breit sind. Wenn Flex-Elemente unterschiedlich lang sind, siehe nächstes Beispiel.

Zentrieren Sie ein flexibles Element, wenn benachbarte Elemente unterschiedlich groß sind

Szenario aus der Frage:

• Befestigen Sie in einer Reihe von drei flexiblen Elementen das mittlere Element in der Mitte des Behälters ( justify-content: center) und richten Sie die benachbarten Elemente an den Behälterkanten ( justify-self: flex-startund justify-self: flex-end) aus.

  Beachten Sie, dass Werte space-aroundund space-betweenauf justify-contentEigenschaft nicht das mittlere Element halten zentriert in Bezug auf den Behälter , wenn die benachbarten Elemente unterschiedliche Breiten aufweisen ( siehe Demo ).

Wie bereits erwähnt, flex-directionkann das mittlere Element nicht wirklich zentriert werden , es sei denn, alle flexiblen Elemente haben die gleiche Breite oder Höhe (abhängig von ). Dieses Problem ist ein starkes Argument für eine justify-selfEigenschaft (die natürlich für die Ausführung der Aufgabe entwickelt wurde).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Hier sind zwei Methoden zur Lösung dieses Problems:

Lösung 1: Absolute Positionierung

Die Flexbox-Spezifikation ermöglicht die absolute Positionierung von Flex-Elementen . Dadurch kann das mittlere Objekt unabhängig von der Größe seiner Geschwister perfekt zentriert werden.

Denken Sie daran, dass die Elemente wie alle absolut positionierten Elemente aus dem Dokumentenfluss entfernt werden . Dies bedeutet, dass sie keinen Platz im Container beanspruchen und ihre Geschwister überlappen können.

In den folgenden Beispielen ist das mittlere Element mit absoluter Positionierung zentriert und die äußeren Elemente bleiben im Fluss. Das gleiche Layout kann jedoch auch in umgekehrter Reihenfolge erzielt werden: Zentrieren Sie das mittlere Element mit justify-content: centerden äußeren Elementen und positionieren Sie sie absolut.

Lösung 2: Verschachtelte Flex-Container (keine absolute Positionierung)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

So funktioniert das:

• Das oberste div ( .container) ist ein Flex-Container.
• Jedes untergeordnete div ( .box) ist jetzt ein flexibles Element.
• Jeder .boxArtikel wird angegeben, flex: 1um den Containerraum gleichmäßig zu verteilen.
• Jetzt belegen die Elemente den gesamten Platz in der Zeile und sind gleich breit.
• Machen Sie aus jedem Element einen (verschachtelten) Flex-Container und fügen Sie ihn hinzu justify-content: center.
• Jetzt ist jedes spanElement ein zentriertes Flex-Element.
• Verwenden Sie flexible autoRänder, um die äußeren spans nach links und rechts zu verschieben.

Sie können auch ausschließlich auf Ränder verzichten justify-contentund diese verwenden auto.

Aber justify-contentkönnen hier arbeiten , weil die autoMargen immer Vorrang haben. Aus der Spezifikation:

8.1. An den auto Rändern ausrichten

Vor der Ausrichtung über justify-contentund align-selfwird jeder positive freie Speicherplatz an die automatischen Ränder in dieser Dimension verteilt.

Inhalt rechtfertigen: Raum gleich (Konzept)

Zurück zu justify-contenteiner Minute, hier ist eine Idee für eine weitere Option.

• space-same~ Ein Hybrid aus space-betweenund space-around. Flex-Elemente haben einen gleichmäßigen Abstand (wie space-between), außer dass anstelle von Zwischenräumen halber Größe an beiden Enden (wie space-around) an beiden Enden Räume voller Größe vorhanden sind.

Dieses Layout kann mit ::beforeund ::afterPseudoelementen auf dem Flexcontainer erreicht werden.

^{(Kredit: @oriol für den Code und @crl für das Etikett)}

UPDATE: Browser haben mit der Implementierung begonnen space-evenly, wodurch das oben genannte erreicht wird. Weitere Informationen finden Sie in diesem Beitrag: Gleicher Abstand zwischen flexiblen Elementen

PLAYGROUND (enthält Code für alle obigen Beispiele)

Ich weiß, dass dies keine Antwort ist, aber ich möchte dazu beitragen, was es wert ist. Es wäre großartig, wenn sie justify-selffür die Flexbox freigeben könnten, um sie wirklich flexibel zu machen.

Ich bin davon überzeugt, dass es bei mehreren Elementen auf der Achse am logischsten justify-selfist, sich an den nächsten Nachbarn (oder Kanten) auszurichten, wie unten gezeigt.

Ich hoffe wirklich, dass W3C dies zur Kenntnis nimmt und es zumindest in Betracht ziehen wird. =)

Auf diese Weise können Sie ein Element erhalten, das unabhängig von der Größe des linken und rechten Felds wirklich zentriert ist. Wenn eine der Boxen den Punkt der mittleren Box erreicht, wird sie einfach gedrückt, bis kein Platz mehr zum Verteilen vorhanden ist.

Die Leichtigkeit, fantastische Layouts zu erstellen, ist endlos. Schauen Sie sich dieses "komplexe" Beispiel an.

Dies wurde in der Liste im www-Stil abgefragt, und Tab Atkins (Spezifikationseditor) gab eine Antwort, in der erklärt wurde, warum . Ich werde hier etwas näher darauf eingehen.

Nehmen wir zunächst an, unser Flex-Container ist einzeilig ( flex-wrap: nowrap). In diesem Fall besteht eindeutig ein Ausrichtungsunterschied zwischen der Hauptachse und der Querachse. Auf der Hauptachse sind mehrere Elemente gestapelt, auf der Querachse jedoch nur ein Element. Es ist also sinnvoll, ein anpassbares "Element selbst ausrichten" auf der Querachse zu haben (da jedes Element einzeln ausgerichtet ist), während es auf der Hauptachse keinen Sinn ergibt (da dort das Elemente werden gemeinsam ausgerichtet).

Für mehrzeilige Flexboxen gilt für jede "flexible Leitung" dieselbe Logik. In einer bestimmten Linie werden Elemente einzeln auf der Querachse ausgerichtet (da es auf der Querachse nur ein Element pro Zeile gibt) und nicht gemeinsam auf der Hauptachse.

Hier ist eine andere Möglichkeit , es zu formulieren: ja, alle von der *-selfund *-contentEigenschaften sind darüber , wie mehr Platz zu verteilen , um die Dinge. Der Hauptunterschied besteht jedoch darin, dass die *-selfVersionen für Fälle vorgesehen sind, in denen nur eine einzige Sache auf dieser Achse vorhanden ist , und die *-contentVersionen für Fälle, in denen möglicherweise viele Dinge auf dieser Achse vorhanden sind . Die Ein-gegen-Viel-Szenarien sind verschiedene Arten von Problemen, und daher stehen verschiedene Arten von Optionen zur Verfügung - zum Beispiel sind die space-around/ space-between-Werte für sinnvoll *-content, aber nicht für *-self.

SO: In der Hauptachse einer Flexbox gibt es viele Dinge, um den Raum herum zu verteilen. Eine *-contentImmobilie macht dort also Sinn, aber keine *-selfImmobilie.

Im Gegensatz dazu haben wir auf der Querachse sowohl eine *-selfals auch eine *-contentEigenschaft. Einer bestimmt, wie der Raum um die vielen Flexlinien verteilt wird ( align-content), während der andere ( align-self) bestimmt, wie der Raum um einzelne Flexelemente auf der Querachse innerhalb einer bestimmten Flexlinie verteilt wird.

(Ich ignoriere *-itemsEigenschaften hier, da sie einfach Standardeinstellungen für festlegen *-self.)

Ich weiß, dass hier keine Flexbox verwendet wird, aber für den einfachen Anwendungsfall von drei Elementen (eines links, eines in der Mitte, eines rechts) kann dies auf einfache Weise display: gridbeim Elternteil, grid-area: 1/1/1/1;bei den Kindern und justify-selfzum Positionieren erreicht werden dieser Kinder.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Ich habe gerade meine eigene Lösung für dieses Problem gefunden, oder zumindest mein Problem.
Ich benutzte justify-content: space-aroundstatt justify-content: space-between;.

Auf diese Weise bleiben die Endelemente oben und unten haften, und Sie können benutzerdefinierte Ränder festlegen, wenn Sie dies wünschen.