it-swarm.com.de

Warum gibt es in CSS Flexbox keine Eigenschaften "Objekte ausrichten" und "sich selbst ausrichten"?

Betrachten Sie die Hauptachse und die Querachse eines flexiblen Containers:

enter image description hereQuelle: W3C

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

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

In der obigen Abbildung ist die Hauptachse horizontal und die Querachse vertikal. Dies sind die Standardrichtungen eines flexiblen Containers.

Diese Richtungen können jedoch problemlos mit der Eigenschaft flex-direction 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 steht immer senkrecht zur Hauptachse.)

Mein Punkt bei der Beschreibung der Arbeit der Achsen ist, dass an keiner Richtung etwas Besonderes zu sein scheint. Hauptachse, Querachse, beide sind gleich wichtig und _flex-direction_ erleichtert das Hin- und Herwechseln.

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

Warum werden _align-content_ und _align-items_ in einer Eigenschaft für die Hauptachse zusammengefasst?

Warum erhält die Hauptachse keine _justify-self_ -Eigenschaft?


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

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

  • eine Gruppe von Flex-Objekten rechtsbündig ausrichten (_justify-content: flex-end_), aber das erste Objekt linksbündig ausrichten (_justify-self: flex-start_)

    Betrachten Sie einen Header-Abschnitt mit einer Gruppe von Navigationselementen und einem Logo. Mit _justify-self_ kann das Logo nach links ausgerichtet werden, während die Navigationselemente ganz rechts bleiben, und das Ganze passt sich nahtlos an verschiedene Bildschirmgrößen an .

  • bringen Sie in einer Reihe von drei flexiblen Elementen das mittlere Element in der Mitte des Containers an (_justify-content: center_) und richten Sie die angrenzenden Elemente an den Containerkanten aus (_justify-self: flex-start_ und _justify-self: flex-end_).

    Beachten Sie, dass die Werte _space-around_ und _space-between_ in der Eigenschaft _justify-content_ das mittlere Element nicht in Bezug auf den Container zentriert halten, 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 middle box will only be truly centered if adjacent boxes are equal width</p>_

jsFiddle version


Gegenwärtig wird in der Flexbox-Spezifikation weder _justify-self_ noch _justify-items_ erwähnt.

Im CSS Box Alignment Module , dem unvollendeten Vorschlag des W3C, einen gemeinsamen Satz von Ausrichtungseigenschaften für alle Boxmodelle festzulegen, gilt Folgendes:

enter image description here Quelle: W3C

Sie werden feststellen, dass _justify-self_ und _justify-items_ in Betracht gezogen werden ... , jedoch nicht für die Flexbox .


Ich werde zum Schluss die Hauptfrage wiederholen:

Warum gibt es keine "Rechtfertigungselemente" - und "Rechtfertigungsselbst" -Eigenschaften?

575
Michael_B

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

Zum Ausrichten von flexiblen Elementen entlang der Querachse gibt es drei Eigenschaften: align-content , align-items_ UND _align-self .

Die Frage lautet dann:

Warum gibt es keine Eigenschaften _justify-items_ und _justify-self_?

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

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

  1. Die Schlüsselworteigenschaft _justify-content_ und
  2. auto Ränder

Inhalt ausrichten

Mit der Eigenschaft justify-content werden Flex-Elemente entlang der Hauptachse des Flex-Containers ausgerichtet.

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

Es gibt fünf Ausrichtungsoptionen:

  • flex-start ~ Flex-Elemente werden zum Zeilenanfang gepackt.

    enter image description here

  • flex-end ~ Flex-Elemente werden gegen Ende der Zeile gepackt.

    enter image description here

  • center ~ Flex-Elemente werden in Richtung der Mitte der Linie gepackt.

    enter image description here

  • 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, die vom ersten und letzten Element verwendet werden, hängen von flex-direction und Schreibmodus (ltr oder rtl) ab.

    enter image description here

  • space-around ~ Wie _space-between_, außer dass an beiden Enden Leerzeichen in halber Größe vorhanden sind.

    enter image description here


Automatische Ränder

Mit auto Margins können Flex-Elemente zentriert, beabstandet oder in Untergruppen gepackt werden.

Im Gegensatz zu _justify-content_, das auf den Flex-Container angewendet wird, werden bei Flex-Elementen auto-Ränder angewendet.

Sie arbeiten, indem sie den gesamten freien Speicherplatz in der angegebenen Richtung belegen.


Richten Sie die Gruppe der flexiblen Elemente nach rechts, aber das erste Element nach links aus

Szenario aus der Frage:

  • eine Gruppe von Flex-Objekten rechtsbündig ausrichten (_justify-content: flex-end_), aber das erste Objekt linksbündig ausrichten (_justify-self: flex-start_)

    Betrachten Sie einen Header-Abschnitt mit einer Gruppe von Navigationselementen und einem Logo. Mit _justify-self_ kann das Logo nach links ausgerichtet werden, während die Navigationselemente ganz rechts bleiben, und das Ganze passt sich nahtlos an verschiedene Bildschirmgrößen an .

enter image description here

enter image description here


Andere nützliche Szenarien:

enter image description here

enter image description here

enter image description here


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

enter image description here


Zentrieren Sie ein flexibles Element vertikal und horizontal

enter image description here

_margin: auto_ ist eine Alternative zu _justify-content: center_ und _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 ein flexibles Element zentriert, das über den Container hinausläuft .


Zentrieren Sie ein flexibles Element und zentrieren Sie ein zweites flexibles Element zwischen dem ersten und dem Rand

Ein flexibler Container richtet flexible Elemente aus, indem freier Speicherplatz verteilt wird.

Daher muss ein Gegengewicht eingeführt werden, um ein gleiches Gleichgewicht zu schaffen, so dass ein mittlerer Gegenstand in dem Behälter mit einem einzigen Gegenstand daneben zentriert werden kann.

In den folgenden Beispielen werden unsichtbare dritte flexible Elemente (Kästchen 61 und 68) eingeführt, um die "echten" Elemente (Kästchen 63 und 66) auszugleichen.

enter image description here

enter image description here

Natürlich ist diese Methode in Bezug auf die Semantik 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 - im Sinne einer echten Zentrierung - nur, wenn die äußersten Elemente die gleiche Höhe/Breite aufweisen. Wenn sich die Länge der Flex-Elemente unterscheidet, lesen Sie das nächste Beispiel.


Zentrieren Sie ein flexibles Objekt, wenn benachbarte Objekte unterschiedlich groß sind

Szenario aus der Frage:

  • bringen Sie in einer Reihe von drei flexiblen Elementen das mittlere Element in der Mitte des Containers an (_justify-content: center_) und richten Sie die angrenzenden Elemente an den Containerkanten aus (_justify-self: flex-start_ und _justify-self: flex-end_).

    Beachten Sie, dass die Werte _space-around_ und _space-between_ auf der Eigenschaft _justify-content_ das mittlere Element nicht in Bezug auf den Container zentrieren, wenn die angrenzenden Elemente unterschiedliche Breiten haben (- siehe Demo ).

Wie bereits erwähnt, kann das mittlere Element nicht wirklich zentriert werden, es sei denn, alle flexiblen Elemente haben die gleiche Breite oder Höhe (abhängig von _flex-direction_). Dieses Problem ist ein starkes Argument für eine _justify-self_ -Eigenschaft (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 erlaubt absolute Positionierung von Flex Items . Dadurch kann der mittlere Gegenstand 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 wird der mittlere Artikel mit absoluter Positionierung zentriert und die äußeren Artikel bleiben im Fluss. Das gleiche Layout kann jedoch auch in umgekehrter Reihenfolge erzielt werden: Zentrieren Sie den mittleren Artikel mit _justify-content: center_ und positionieren Sie die äußeren Artikel absolut.

enter image description here

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 übergeordnete div (_.container_) ist ein flexibler Container.
  • Jedes untergeordnete div (_.box_) ist jetzt ein flexibles Element.
  • Jedes _.box_ Element erhält _flex: 1_, um den Containerraum gleichmäßig zu verteilen.
  • Jetzt verbrauchen die Elemente den gesamten Platz in der Reihe und sind gleich breit.
  • Machen Sie jedes Objekt zu einem (verschachtelten) Flex-Container und fügen Sie _justify-content: center_ hinzu.
  • Jetzt ist jedes span -Element ein zentriertes Flex-Element.
  • Verwenden Sie die flexiblen Ränder von auto, um die äußeren Ränder von span nach links und rechts zu verschieben.

Sie können auch auf _justify-content_ verzichten und ausschließlich auto-Ränder verwenden.

Aber _justify-content_ kann hier funktionieren, weil auto Ränder immer Vorrang haben. Aus der Spezifikation:

8.1. An auto Rändern ausrichten

Vor der Ausrichtung über _justify-content_ und _align-self_ wird der positive freie Speicherplatz auf die automatischen Ränder in dieser Dimension verteilt.


justify-content: space-same (Konzept)

Zurück zu justify-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-Elemente haben einen gleichmäßigen Abstand (wie _space-between_), außer dass an beiden Enden Leerzeichen in halber Größe (wie _space-around_) und Leerzeichen in voller Größe vorhanden sind.

Dieses Layout kann mit ::before und ::after Pseudoelementen auf dem Flex-Container erreicht werden.

enter image description here

(credit: @ oriol für den Code und @ crl für das Etikett)

UPDATE: Browser haben mit der Implementierung von space-evenly begonnen obenstehendes. Weitere Informationen finden Sie in diesem Beitrag: Gleicher Abstand zwischen flexiblen Elementen


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

1074
Michael_B

Ich weiß, dass dies keine Antwort ist, aber ich würde gerne zu dieser Angelegenheit beitragen, was es wert ist. Es wäre großartig, wenn sie justify-self für flexbox veröffentlichen könnten, um es wirklich flexibel zu machen.

Ich bin der Meinung, dass bei mehreren Elementen auf der Achse das logischste Verhalten von justify-self darin besteht, sich an den nächsten Nachbarn (oder der Kante) auszurichten, wie unten gezeigt.

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

enter image description here

Auf diese Weise können Sie ein Objekt erstellen, das unabhängig von der Größe der linken und rechten Box 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.

enter image description here

Die Möglichkeiten, großartige Layouts zu erstellen, sind endlos. Schauen Sie sich dieses "komplexe" Beispiel an.

enter image description here

119
Mark

Dies wurde in der Liste im WWW-Stil abgefragt, und Tab Atkins (Spezifikationseditor) lieferte eine Antwort, in der erklärt wurde, warum . Darauf werde ich hier noch näher eingehen.

Zunächst nehmen wir an, dass unser Flex-Container einzeilig ist (flex-wrap: nowrap). In diesem Fall besteht eindeutig ein Ausrichtungsunterschied zwischen der Hauptachse und der Querachse - es sind mehrere Elemente in der Hauptachse gestapelt, aber nur ein Element in der Querachse. Es ist also sinnvoll, ein anpassbares Element für jedes Element in der Querachse "align-self" zu haben (da jedes Element separat für sich ausgerichtet ist), wohingegen es in der Hauptachse keinen Sinn ergibt (da dort das Element "align-self" ist) Artikel werden gemeinsam ausgerichtet).

Bei mehrzeiligen Flexboxen gilt für jede "Flex-Leitung" die gleiche Logik. In einer bestimmten Zeile werden die Elemente einzeln in der Querachse ausgerichtet (da es nur ein Element pro Zeile in der Querachse gibt) und zusammen in der Hauptachse.


Hier ist eine andere Möglichkeit, es zu formulieren: all der Eigenschaften *-self und *-content beschreibt, wie zusätzlicher Raum um Dinge verteilt wird. Der Hauptunterschied besteht jedoch darin, dass die Versionen von *-self für Fälle gelten, in denen nur ein einzelnes Element in dieser Achse und die Versionen von *-content für Fälle, in denen möglicherweise viele Elemente in dieser Achse vorhanden sind =. Bei den Szenarien Eins gegen Vieles handelt es sich um unterschiedliche Arten von Problemen. Daher stehen unterschiedliche Arten von Optionen zur Verfügung. Beispielsweise sind die Werte für space-around/space-between für *-content sinnvoll, nicht jedoch für *-self.

SO: In der Hauptachse einer Flexbox gibt es viele Dinge, um die der Raum verteilt werden kann. Eine *-content -Eigenschaft ist dort also sinnvoll, aber keine *-self -Eigenschaft.

Im Gegensatz dazu haben wir in der Querachse sowohl eine *-self- als auch eine *-content-Eigenschaft. Einer bestimmt, wie der Raum um die vielen flexiblen Linien (align-content) verteilt wird, während der andere (align-self) bestimmt, wie der Raum um einzelne flexible Elemente in der Querachse verteilt wird innerhalb einer gegebenen Flex-Linie.

(Ich ignoriere hier die Eigenschaften von *-items, da sie lediglich die Standardeinstellungen für *-self festlegen.)

18
dholbert

Ich weiß, dass dies keine Flexbox verwendet, aber für den einfachen Anwendungsfall von drei Elementen (eines links, eines in der Mitte, eines rechts) kann dies einfach mit display: grid auf dem übergeordneten Element grid-area: 1/1/1/1; für die Kinder und justify-self für die Positionierung 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>
0
Venryx

Es gibt justify-self, aber in Chrome Canary, nicht in Chrome stable version. Es gibt sogar justify-items:

enter image description here

Aber soweit ich das beurteilen kann, funktionieren diese Eigenschaften auch nicht. Vermutlich hat Google es vorher für zukünftige CSS-Versionen gespeichert. Kann nur hoffen, dass sie die Eigenschaften bald hinzufügen.

0
Green