CSS/Eigenschaften/Flexbox/Achsen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft flex-direction legt im Flexible Box Layout Module [1] 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.


flex-direction[Bearbeiten]

Die Eigenschaft flex-direction legt im Flexible Box Layout Module die Verlaufsrichtung der Hauptachse fest.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • row: (Standardwert) die Hauptachse entspricht der Schreibrichtung
  • row-reverse: die Hauptachse läuft entgegengesetzt zur Schreibrichtung
  • column: die Hauptachse entspricht der Blockachse, es wird alles vertikal in einer Spalte angeordnet
  • column-reverse: die Hauptachse läuft entgegengesetzt zur Blockachse, es wird alles vertikal in einer Spalte angeordnet
Beispiel: Änderung der Reihenfolge mit flex-direction ansehen …
main {
  -webkit-display: flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
 
/* große Viewports */
@media all and (min-width: 800px) {
  main {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  header, article, nav, section, aside, footer {
    -webkit-flex: 1;
    flex: 1 ;
  }
}

Im Beispiel sind alle flexiblen Elemente untereinander angeordnet. Erst auf großen Viewports wird mittels media queries flex-direction:row; eingestellt, so dass die flexiblen Elemente nebeneinander platziert werden.

Alle Elemente in einer Reihe haben auch bei unterschiedlichem Inhalt trotzdem die gleiche Größe; etwas was sonst nur mit weiteren Einstellungen wie display:table-cell; möglich wäre. Werden die Elemente untereinander angezeigt, richtet sich ihre Höhe nach dem Inhalt oder einer zu definierenden Höhenangabe.


justify-content[Bearbeiten]

Die Eigenschaft justify-content legt fest, wie die einzelnen flexiblen Elemente entlang der Hauptachse angeordnet werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Anordnung von Elementen mit justify-content ansehen …
section {
  display: flex;
}
 
.vorne  {
  justify-content: flex-start;
}
 
.mittig {
  justify-content: center;
}
 
.verteilt1 {
  justify-content: space-between;
}

.verteilt2 {
  justify-content: space-around;
}


Folgende Angaben sind möglich:

  • 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 Abstand ist links und rechts
  • space-between: Alle Elemente werden verteilt, zwischen ihnen ist ein (möglicher) 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

align-content[Bearbeiten]

Die Eigenschaft align-content legt fest, wie die einzelnen flexiblen Elemente entlang der Querachse angeordnet werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Anordnung von Elementen mit align-content ansehen …
  section {
    display: flex;
    flex-flow: row wrap;
  }
 
  .vorne  {
    align-content: flex-start;
  }
 
  .mittig {
    align-content: center;
  }
 
  .stretch {
    align-content: stretch;
  }
 
  .verteilt1 {
    align-content: space-between;
  }
 
  .verteilt2 {
    align-content: space-around;
  }
Beachten Sie: Wenn Sie das im Beispiel verwendete flex-flow: row wrap; verwenden wollen, müssen Sie die (browsereigene) margin der flexiblen Elemente auf 0 stellen, da sonst die flexiblen Elemente aus dem Eltern-Container hinausragen.

Folgende Angaben sind möglich:

  • stretch: (Standardwert) Alle Elemente werden gleichmäßig verteilt, ein möglicher Abstand zwischen den Elementen und nach dem letzten Element ist gleich
  • flex-start: Alle Elemente werden oben angeordnet
  • flex-end: Alle Elemente werden unten angeordnet
  • center: Alle Elemente werden mittig angeordnet, ein möglicher Abstand ist oben und unten
  • space-between: Alle Elemente werden verteilt, zwischen ihnen ist ein (möglicher) Abstand, das erste und letzte Element stoßen an die obere und untere 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:

align-items[Bearbeiten]

Die Eigenschaft align-items legt fest, wie die einzelnen flexiblen Elemente entlang der Querachse angeordnet werden. Im Gegensatz zu justify-content geht es hier meist um die vertikale Anordnung, z.B. von Bildern.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Anordnung von Elementen mit align-items ansehen …
section {
  display: flex;
  justify-content: space-around;
}
 
.oben  {
  align-items: flex-start;
}
 
.mittig {
  align-items: center;
}
 
.unten {
  align-items: flex-end;
}

Folgende Angaben sind möglich:

  • stretch: (Standardwert) Alle Elemente werden gleichmäßig verteilt, ein möglicher Abstand zwischen den Elementen und nach dem letzten Element ist gleich
  • flex-start: Alle Elemente werden oben angeordnet
  • flex-end: Alle Elemente werden unten angeordnet
  • center: Alle Elemente werden mittig angeordnet, ein möglicher Abstand ist oben und unten
  • baseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtet
  • initial
  • inherit
Beachten Sie: Wenn Sie den flexiblen Elementen keine feste Höhe und in der Eigenschaft align-items keinen Wert zuweisen, passt der Standardwert stretch die Höhe aller flexiblen Elemente an das größte Schwesterelement an.
Beachten Sie: Der Internet Explorer hat in den Versionen 10 und 11 einen Bug, der flexible Elemente über den Flex-Container herausragen lässt, wenn zuwenig Platz vorhanden ist. Eine Angabe von max-width: 100% löst das Problem.[2].

Siehe auch: CSS/Anwendung und Praxis/Inhalte zentrieren

align-self[Bearbeiten]

Durch die Eigenschaft align-self können Sie eine Ausnahme der Anordnung der flexiblen Elemente festlegen. Dabei bekommt das flexible Element mit align-self eine andere Eigenschaft als die anderen Schwesterelemente, die durch die Eigenschaft align-items des Eltern-Containers angeordnet werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Anordnung von Elementen mit align-self ansehen …
section {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
 
#ausnahme {     
  align-self: flex-end;
}

Folgende Angaben sind möglich:

  • auto: (Standardwert) Wert wird vom Elternelement übernommen
  • stretch: Element wird gleichmäßig verteilt
  • center: Element wird mittig angeordnet
  • flex-start: Element wird oben angeordnet
  • flex-end: Element wird unten angeordnet
  • baseline: Element wird an der Grundlinie (baseline) ausgerichtet
  • initial
  • inherit

Quellen[Bearbeiten]

  1. W3C: CSS Box Alignment Module Level 3
  2. Philip Walton: Column flex items set to align-items:center overflow their container