In CSS Flexbox, warum gibt es keine "rechtfertigen-Elemente" und "rechtfertigen-selbst" - Eigenschaften?

Methoden für die Ausrichtung von Flex-Elemente entlang der Hauptachse

Wie gesagt in der Frage:

Ausrichten flex-Elemente entlang der Hauptachse gibt es eine Eigenschaft: rechtfertigen-content

Ausrichten flex-Elemente entlang der Querachse gibt es drei Eigenschaften: align-content, align-items und align-self.

Dann die Frage stellt:

Warum gibt es keine justify-items und justify-self Eigenschaften?

Einer Antwort kann sein: , Weil Sie nicht notwendig.

Den flexbox-Spezifikationen bietet zwei Methoden für die Ausrichtung von flex-Elemente entlang der Hauptachse:

1. Die justify-content keyword-Eigenschaft, und
2. auto Ränder

---

rechtfertigen-content

Den rechtfertigen-content Eigenschaft richtet flex-Elemente entlang der Hauptachse der flex-container.

Es wird angewendet, um die flex-container, sondern wirkt sich nur auf flex-Elemente.

Gibt es fünf alignment-Optionen:

• flex-start ~ Flex-Artikel sind verpackt in Richtung des Startpunktes der Linie.

  

• flex-end ~ Flex-Elemente sind verpackt, die gegen das Ende der Zeile.

  

• center ~ Flex-Artikel sind verpackt in Richtung der Mitte der Linie.

  

• space-between ~ Flex-items gleichmäßig verteilt sind, wird mit dem ersten Element ausgerichtet sind, um eine Kante des Containers und der Letzte Punkt ausgerichtet, um die gegenüberliegende Kante. Die Kanten, die durch die ersten und letzten Elemente hängt davon ab, flex-direction und schreiben Modus (ltr oder rtl).

  

• space-around ~ Gleiche wie space-between außer mit half-size Leerzeichen an beiden enden.

  

---

Auto Ränder

Mit auto Ränder, flex-Elemente werden zentriert, Abstand oder verpackt in sub-Gruppen.

Im Gegensatz zu justify-content, die angewendet wird, um die flex-container, auto Margen gehen auf flex-Elemente.

Arbeiten Sie durch den Verzehr von allen freien Raum in die angegebene Richtung.

---

Auszurichten Gruppe von flex-Elemente auf der rechten Seite, aber erste Element auf der linken Seite

Szenario von der Frage:

• dass eine Gruppe von flex-Elemente ausrichten-rechts (justify-content: flex-end)
  aber das erste Element Links ausrichten (justify-self: flex-start)

  Betrachten einen Abschnitt mit einer Gruppe von nav-Elementen und ein logo. Mit
  justify-self dem logo angeglichen werden könnten, während Links die nav-Objekte bleiben
  weit rechts, und die ganze Sache passt reibungslos ("beugt") zu
  verschiedene Bildschirm-Größen.

---

Andere nützliche Szenarien:

---

Ort ein flex-Element in der Ecke

Szenario von der Frage:

• stellen einer flex-Element in einer Ecke .box { align-self: flex-end; justify-self: flex-end; }

---

Center ein flex-Element vertikal und horizontal

margin: auto ist eine alternative zu justify-content: center und align-items: center.

Statt diesen code auf der flex-container:

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

Können Sie diese über die flex-Element:

.box56 {
    margin: auto;
}

Diese alternative ist besonders nützlich, wenn Zentrierung ein flex-Element, das überläuft den container.

---

- Center, einem flex-Element, und in der Mitte eine zweite flex-Element zwischen dem ersten und dem edge -

Einem flex-container richtet flex-Elementen durch die Verteilung von freien Speicherplatz.

Daher, um zu erstellen Gleichgewicht, so dass eine mittlere Position kann zentriert im container mit nur einem Element neben, ein Gegengewicht muss eingeführt werden.

In den Beispielen unten unsichtbare Dritte flex-items (Felder 61 & 68) eingeführt werden, um das Gleichgewicht der "echten" items (Feld 63 & 66).

Natürlich, diese Methode ist nichts großartiges in Bezug auf Semantik.

Alternativ können Sie mit einem pseudo-element anstelle der eigentlichen DOM-element. Oder Sie können absolute Positionierung. Alle drei Methoden werden hier behandelt: Mitte und unten-Ausrichtung der flex-Elemente

HINWEIS: in Den Beispielen oben wird nur funktionieren – im Sinne einer echten Zentrierung – wenn die äußersten Elemente gleich sind Höhe/Breite. Bei der flex-Elemente sind in unterschiedlichen Längen, siehe Nächstes Beispiel.

---

- Center, einem flex-Element, wenn benachbarte Elemente in der Größe variieren

Szenario von der Frage:

• in einer Reihe von drei flex-Elemente, befestigen Sie den mittleren Punkt auf der Mitte der container (justify-content: center) und richten Sie die angrenzende
  Elemente der container-Kanten (justify-self: flex-start und
  justify-self: flex-end).

  Beachten Sie, dass die Werte space-around und space-between auf justify-content Eigenschaft wird nicht halten Sie die mittlere Element zentriert in Bezug auf die Behälter, wenn die benachbarten Elemente haben unterschiedliche breiten (siehe demo).

Als angegeben, es sei denn, alle flex-items sind von gleicher Breite oder Höhe (je nach flex-direction), das mittlere Element kann nicht wirklich zentriert. Dieses problem macht sich stark für eine justify-self Eigenschaft (entworfen, diese Aufgabe zu bewältigen, natürlich).

CSS:

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

HTML:

<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 für die Lösung dieses Problems:

Lösung #1: Absolute Positionierung

Des flexbox-Spezifikation erlaubt für absolute Positionierung der flex-Elemente. Dies ermöglicht die für den mittleren Punkt, um perfekt zentriert, unabhängig von der Größe seiner Geschwister.

Nur im Kopf behalten, dass, wie alle absolut positionierten Elementen, die Elemente, die entfernt von der Belegfluss. Dies bedeutet, dass Sie nicht nehmen viel Platz im container und können sich überschneiden, Ihre Geschwister.

In den Beispielen unten, das mittlere Element wird zentriert mit absoluter Positionierung und die äußeren Gegenstände bleiben im Fluss. Aber das gleiche layout erreicht werden kann im reverse Mode: Center-mitten-Element mit justify-content: center - und absolut-position der äußeren Elemente.

Lösung #2: Geschachtelte Flex-Containern (keine absolute Positionierung)

CSS:

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

HTML:

<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>

Hier ist, wie es funktioniert:

• Die top-level-div (.container) ist ein flex-container.
• Jedes Kind div (.box) ist jetzt ein flex-Element.
• Jeder .box Element ist gegeben flex: 1 verteilen, um container-Raum gleichermaßen.
• Jetzt die items sind, verbrauchen alle Speicherplatz in der Zeile und die gleiche Breite.
• Machen jedes Element eine (geschachtelte) flex-container und fügen justify-content: center.
• Jetzt jeder span element ist zentriert flex-Element.
• Flex auto Margen Verschiebung der äußeren spans Links und rechts.

Könnte man auch verzichten justify-content und verwenden auto Margen ausschließlich.

Aber justify-content können hier arbeiten, weil auto Margen haben immer Priorität. Aus der spec:

8.1. Ausrichten mit auto
Margen

Vor der Ausrichtung über justify-content und align-self jede
positiver freier Raum verteilt wird, um die auto-Margen in dieser dimension.

---

justify-content: space-gleichen (Konzept)

Zurück zu rechtfertigen-content für eine minute, hier ist eine Idee für eine weitere option.

• space-same ~ Ein hybrid aus space-between und space-around. Flex-items gleichmäßig verteilt sind (wie space-between), nur dass statt der halben Größe Leerzeichen an beiden enden (wie space-around), es gibt full-size-Räume an beiden enden.

Dieser Anordnung kann erreicht werden, mit ::vor dem und ::after pseudo-Elemente auf der flex-container.

^{(credit: @oriol für den code, und @crl für das label)}

UPDATE: Browser haben mit der Umsetzung begonnen space-evenly, die erfüllt die oben aufgeführten. Siehe diesen post für weitere details: Gleich viel Raum zwischen den flex-items

---

SPIELPLATZ (enthält den code für alle Beispiele oben)

Dieser wurde gebeten, auf der www-Liste "Stil" und Tab Atkins (spec-editor) eine Antwort, die erklärt, warum. Ich werde nochmal ein bisschen hier.

Beginnen, lassen Sie uns zunächst davon ausgehen, unsere flex-container ist single-line (flex-wrap: nowrap). In diesem Fall, es ist eindeutig eine Ausrichtung Unterschied zwischen der Hauptachse und die Querachse-es gibt mehrere Elemente übereinander gestapelt in der Hauptachse, sondern nur ein Element gestapelt in der Querachse. Es macht also Sinn, um ein customizeable-pro-Element "align-self" in der Querachse (da jedes Element ausgerichtet ist separat, auf eigene), in der Erwägung, dass es nicht sinnvoll ist, in der main-Achse (da die Elemente ausgerichtet sind, Kollektiv).

Für multi-line flexbox, die gleiche Logik gilt für jeden "flex line". In einer bestimmten Zeile, die Elemente sind individuell ausgerichtet, in der Querachse (da gibt es nur ein Element pro Zeile, in der Kreuz-Achse) vs. Kollektiv in der Hauptachse.

---

Hier ist ein weiterer Weg der Wahrheit zu formulieren: so, alle der *-self und *-content Eigenschaften sind etwa wie die Verteilung von extra-Raum um Dinge. Aber der entscheidende Unterschied ist, dass die *-self Versionen sind für die Fälle wo es nur eine einzige Sache in dieser Achse, und die *-content Versionen sind für, wenn es potenziell viele Dinge in dieser Achse. Die ein-Ding vs. die viele-Dinge, die Szenarien sind verschiedene Arten von Problemen, und so haben Sie unterschiedliche Arten von Optionen zur Verfügung-zum Beispiel die space-around /space-between Werte sinnvoll für *-content, aber nicht für *-self.

SO: In einem flexbox-Haupt-Achse, es gibt viele Dinge zu verteilen, die den Raum um sich herum. So ein *-content Eigenschaft macht es Sinn, aber nicht ein *-self Eigenschaft.

Im Gegensatz, in der Querachse, wir haben beide eine *-self und ein *-content Eigenschaft. Man bestimmt, wie wir verteilen den Raum um sich herum die viele flex-Linien (align-content), während die andere (align-self) bestimmt, wie die Verteilung von Freiraum um einzelnen flex-Elemente in der Querachse, in einem bestimmten flex-line.

(Ich Ignoriere *-items Eigenschaften hier, da Sie einfach einrichten von Standardwerten für die *-self.)