Referenz:CSS/Eigenschaften/justify-content

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft justify-content CSS 3.0
Beschreibung legt die Verlaufsrichtung der Hauptachse, an der sich die flexiblen Elemente orientieren, fest. An dieser Achse richten sich dann auch die Eigenschaften justify-content, align-content, align-items und align-self aus.
erlaubte Werte
  • flex-start: Alle Elemente werden linksbündig angeordnet
  • flex-end: Alle Elemente werden rechtsbündig angeordnet
  • center: Alle Elemente werden mittig angeordnet, ein möglicher Rand ist links und rechts
  • space-between: Alle Elemente werden verteilt, zwischen ihnen ist gleichmäßiger Abstand, das erste und letzte Element stoßen an die rechte und linke Seite des Elternelements
  • space-around: Alle Elemente werden verteilt, der mögliche Abstand ist sowohl zwischen den Elementen als auch zum Eltern-Container
  • initial
  • inherit
default-Wert

flex-start

anwendbar auf flexible Container (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif jusitfy-content property
Beispiel
.vorne  {
  justify-content: flex-start;
}
 
.mittig {
  justify-content: center;
}
 
.verteilt1 {
  justify-content: space-between;
}

Im Beispiel hat die erste Reihe den Standardwert nowrap, da flex-wrap nicht festgelegt wurde. Deshalb werden die festgelegten Breiten ignoriert und passen sich die flexiblen Elemente an die Breite des Eltern-Container an. Die zweite Reihe mit der Eigenschaft flex-wrap: wrap; stellt die Elemente mit ihren festgelegten Breiten dar, so dass es zu einem Zeilenumbruch kommt. Mit der Eigenschaft flex-wrap: wrap-reverse; kann die Anordnung der Zeilen (nicht der flexiblen Elemente) vertauscht werden.

Beachten Sie

{{{Hinweis}}}

Tipp

{{{Tipp}}}