Warum gibt es in CSS Flexbox keine „justify-items“- und „justify-self“-Eigenschaften? ⇐ CSS

[Anonymous]

Betrachten Sie die Hauptachse und die Querachse eines Flex-Containers:

Quelle: W3C
An Um flexible Elemente entlang der Hauptachse auszurichten, gibt es eine Eigenschaft:

• Code: Select all

  justify-content

Um flexible Elemente entlang der Querachse auszurichten, gibt es drei Eigenschaften:

• Code: Select all

  align-content
  [*]align-items
  [*]align-self

Im Bild oben ist die Hauptachse horizontal und die Querachse vertikal. Dies sind die Standardrichtungen eines Flex-Containers.
Diese Richtungen können jedoch problemlos mit der Eigenschaft „flex-direction“ ausgetauscht werden.

Code: Select all

/* 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 Funktionsweise der Achsen ist, dass es in keiner Richtung etwas Besonderes zu geben scheint. Hauptachse und Querachse, sie sind beide hinsichtlich der Wichtigkeit gleich und die Flexrichtung 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 Achse?
Warum erhält die Hauptachse keine justify-self-Eigenschaft?

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

• Platzieren eines Flex-Elements in der Ecke des Flex-Containers
  

  Code: Select all

  #box3 { align-self: flex-end; justify-self: flex-end; }

• Eine Gruppe von Flex-Elementen nach rechts ausrichten (

  Code: Select all

  justify-content: flex-end

  ), aber das erste Element muss links ausgerichtet sein (

  Code: Select all

  justify-self: flex-start

  )

Betrachten Sie einen Kopfbereich mit einer Gruppe von Navigationselementen und einem Logo. Mit justify-self könnte das Logo nach links ausgerichtet werden, während die Navigationselemente ganz rechts bleiben, und das Ganze passt sich reibungslos („flexiert“) an unterschiedliche Bildschirmgrößen an.

• Befestigen Sie in einer Reihe von drei Flex-Elementen das mittlere Element in der Mitte des Containers (

  Code: Select all

  justify-content: center

  ) und richten Sie die angrenzenden Elemente an den Containerkanten aus (

  Code: Select all

  justify-self: flex-start

  und justify-self: flex-end).

Beachten Sie, dass die Werte „space-around“ und „space-between“ aktiviert sind

Code: Select all

justify-contentDie Eigenschaft 

hält das mittlere Element nicht in der Mitte des Containers, wenn die angrenzenden Elemente unterschiedliche Breiten haben.

Code: Select all

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

Code: Select all

TRUE CENTER





note that the middlebox will only be truly centered if adjacent boxes are equal width

jsFiddle-Version

Zum jetzigen Zeitpunkt gibt es keine Erwähnung von justify-self oder justify-items in der Flexbox-Spezifikation.
Allerdings in der CSS-Boxausrichtung Modul, bei dem es sich um den unvollendeten Vorschlag des W3C handelt, einen gemeinsamen Satz von Ausrichtungseigenschaften für die Verwendung in allen Boxmodellen festzulegen, gibt es dieses:

                                                                                                                                               Quelle: W3C
Sie werden feststellen, dass justify-self und justify-items in Betracht gezogen werden... jedoch nicht für Flexbox.