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

675

Betrachten Sie die Hauptachse und die Querachse eines Flexcontainers:

Geben Sie hier die Bildbeschreibung ein                                                                                                                                                    Quelle: W3C

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

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

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.

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:

Geben Sie hier die Bildbeschreibung ein                                                                                                                                                    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"?

Michael Benjamin
quelle
4
Wie würden Sie erwarten justify-self, für einen Flex-Artikel zu arbeiten? Angenommen, Sie haben Elemente a, b, c, d mit zusätzlichem Platz, um sie zu verteilen, und der Flex-Container hat sie justify-content: space-between, sodass sie wie | abcd | enden. Was würde es bedeuten, zB justify-self: centeroder 'Rechtfertigung-Selbst: Flex-Ende' nur zu Punkt 'b' hinzuzufügen? Wo würdest du es erwarten? (Ich sehe einige Demos in einer der Antworten hier, aber ich sehe keinen klaren Weg, wie es im Allgemeinen funktionieren würde.)
Dholbert
(Alternativ: Nehmen wir an, wir haben justify-content: flex-start, also sind die Elemente am Anfang wie | abcd | überfüllt. Was würden Sie erwarten, wenn Sie dort justify-self: [anything]Element 'b'
anlegen
1
@dholbert, Sie haben geschrieben: Wie würden Sie erwarten justify-self, für einen Flex-Artikel zu arbeiten? Ich würde sagen, nicht so anders als die autoRänder, die bereits bei flexiblen Elementen funktionieren. In Ihrem zweiten Beispiel justify-self: flex-endwürde Element d es an die äußerste Kante verschieben. Das an sich wäre ein großartiges Feature, das autoMargen bereits können. Ich habe eine Antwort mit einer Demonstration gepostet.
Michael Benjamin
2
Ich sehe hier meistens mehr Anwendungsfälle, und Anwendungsfälle sind großartig - aber das Knifflige ist, wie man dies in die tatsächliche Art justify-contentund Weise einbindet und justify-selfspezifiziert, so dass Fälle mit Konflikten (wie die Szenarien, nach denen ich gefragt habe) sind klar und vernünftig definiert. Wie ich in meiner Antwort hier bemerkt habe, geht {justify|align}-selfes darum, Elemente in einem größeren Feld{justify|align}-self auszurichten, dessen Größe unabhängig vom Wert ist - und es gibt kein solches Feld auf der Hauptachse, in das ein flexibles Element ausgerichtet werden kann.
Dholbert
1
RE "nicht anders als automatische Ränder" - Ich habe tatsächlich gefragt, wie Sie sich vorstellen justify-selfund wie Sie justify-contentinteragieren würden, wenn sie in Konflikt stehen (wie in den von mir beschriebenen Szenarien). Automatische Ränder interagieren einfach überhaupt nichtjustify-content - sie stehlen den gesamten Packraum, bevor justify-contentsie verwendet werden können. Auto-Ränder sind also kein gutes Analogon dafür, wie dies funktionieren würde.
Dholbert

Antworten:

1246

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.

    Geben Sie hier die Bildbeschreibung ein

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

    Geben Sie hier die Bildbeschreibung ein

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

    Geben Sie hier die Bildbeschreibung ein

  • 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).

    Geben Sie hier die Bildbeschreibung ein

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

    Geben Sie hier die Bildbeschreibung ein


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.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein


Andere nützliche Szenarien:

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein


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

Geben Sie hier die Bildbeschreibung ein


Zentrieren Sie ein flexibles Element vertikal und horizontal

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

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

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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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

Michael Benjamin
quelle
1
Die Antwort oben deckt die Hauptachse , justify-contentund die autoMargen. Für die andere Seite der Medaille - die Querachse , align-items, align-selfund align-content- siehe diesen Beitrag: stackoverflow.com/q/42613359/3597276
Michael Benjamin
4
@ MarkW, Sie machen den Fall für die justify-selfEigenschaft ... autoRänder sind hilfreich, aber justify-self: centerideal. Die Lösung des von Ihnen vorgestellten Problems besteht darin, unsichtbare doppelte Elemente auf der gegenüberliegenden Seite zu erstellen. Siehe meine Antwort hier: stackoverflow.com/q/38948102/3597276
Michael Benjamin
5
Ihr space-sameKonzept ist jetzt eine echte Sache. Es heißt space-evenly, wird aber derzeit nur von Firefox unterstützt: developer.mozilla.org/en-US/docs/Web/CSS/justify-content
benface
1
@benface, ja, du hast recht. Vielen Dank für den Hinweis. Ich habe tatsächlich space-evenlyin anderen Antworten darüber geschrieben: stackoverflow.com/q/45134400/3597276
Michael Benjamin
1
In der Tat space-evenly wurde in Chrome 57-60 unterstützt, aber nur für Grid-Layout. Es war ein Fehler, der behoben wurde, und seit Chrome 61 wird er dort auch für Flexbox unterstützt. Es gibt auch die Möglichkeit, es ohne Pseudoelemente zu emulieren : .item { margin-right: auto } .item:first-child { margin-left: auto }.
Ilya Streltsyn
154

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. =)

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

Kennzeichen
quelle
12
@ Mark das ist unglaublich! Vielen Dank, dass Sie sich die Zeit genommen haben, dies zu entwerfen. Ich hoffe , dass es Ihnen nichts ausmacht , aber ich habe es hier vorgelegt: discourse.wicg.io/t/flexbox-justify-self-property/1146
Zaqx
1
@Zaqx sicher, je mehr Belichtung desto besser. Ich hoffe ernsthaft, dass sie einen Weg finden, diese Realität zu verwirklichen, und würde mir gerne die Hände schmutzig machen.
Mark
1
Hallo Markus, @Zaqx, ich habe eine Antwort gepostet, die einige der in dieser Antwort genannten Anwendungsfälle abdecken kann. Ich habe festgestellt, dass in der Hauptachse noch viel getan werden kann, ohne justify-selfund justify-items.
Michael Benjamin
3
@Michael_B Ich bin froh, dass Sie mehr über Flexbox erfahren und weiß, dass Sie sich die Zeit genommen haben, Ihre Notizen in eine Antwort zu formatieren. Margin: Auto ist in der Tat cool (obwohl Sie feststellen werden, dass die Browser, die die Versionen 2009 und 2012 der Flexbox-Spezifikation implementiert haben, keine gleichwertige Funktion haben, die die Möglichkeit, sie auf einer Produktionsstätte zu verwenden, drastisch verringert). Selbst mit Browsern, die margin: auto unterstützen, ist der Hauptanwendungsfall eines Elements, das relativ zu seinem Container zentriert ist, während Speicherplatz vorhanden ist, ohne eine Eigenschaft zum Rechtfertigen oder Ähnliches immer noch nicht möglich.
Zaqx
1
@Zaqx, danke für das Feedback. Und ja, ich stimme Ihnen zu, autoMargen sind kein vollständiger Ersatz für justify-self. Ich habe meinen vorherigen Kommentar sorgfältig formuliert, indem ich sagte, dass die autoRänder einige der Anwendungsfälle abdecken . Wie Sie bereits bemerkt haben, kann ein Element nicht zentriert werden, wenn benachbarte Elemente unterschiedliche Größen haben. Es bietet jedoch mehr Optionen zum Ausrichten von Flex-Elementen. Als ich anfing, etwas über Flexbox zu lernen, dachte ich, dass justify-contentunsichtbare Abstandshalter der einzige Weg sind.
Michael Benjamin
20

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

dholbert
quelle
1
Ich verstehe, wie ein justify-selfProblem auf einer Achse mit mehreren Elementen im Gegensatz zu einem Element sein kann. Ich hoffe jedoch wirklich, dass sie sich in einer Situation mit mehreren Elementen justify-selfweiter damit befassen, wie sich dies verhalten würde , da es einige Situationen gibt, in denen dies wirklich nützlich sein könnte. Zum Beispiel ( stackoverflow.com/questions/32378953/… ).
Mark
Schöner Fund auf dieser Mailingliste. Ich versuche, meinen Kopf darum zu wickeln, da ich immer noch gute Anwendungsfallmöglichkeiten für sehe justify-self.
Michael Benjamin
Ich habe etwas mehr Klarheit hinzugefügt und erklärt, wie *-selfes um Fälle geht, in denen wir nur eine Sache ausrichten müssen, während *-contentes um Fälle geht, in denen wir viele Dinge ausrichten müssen. Macht das etwas klarer?
Dholbert
Ja, es ist klarer. Ich schätze die Erklärung. Aber es scheint alles auf eine einfache Präferenz der Spezifikationsautoren hinauszulaufen, nicht auf ein bestimmtes Bedürfnis, das auf Logik basiert. Aus der Mailingliste, auf die Sie verwiesen haben : Die Eigenschaften * -self funktionieren nur, wenn das untergeordnete Element in dieser Achse ganz allein ist. Warum? Es scheint keine Notwendigkeit dafür zu geben. Es ist eine willkürliche Entscheidung. Eine Präferenz. Tatsächlich ermöglichen autoRänder, die ebenfalls Teil der Spezifikation sind, die * Selbstausrichtung mit mehreren Elementen in der Zeile. Kein klarer Grund, warum Keyword-Eigenschaften dies ebenfalls nicht können.
Michael Benjamin
1

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>

Venryx
quelle
Vielen Dank für die Antwort, aber die Frage wird nicht wirklich beantwortet. Es gibt auch eine einfachere Möglichkeit, Ihr Layout zu erstellen
Michael Benjamin
0

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.

Leif Messinger LOAF
quelle