CSS/Eigenschaften/Flexbox/flex-flow

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

flex-flow ist die zusammenfassende Eigenschaft von flex-direction und flex-wrap. Die Reihenfolge der Angaben ist egal.


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.


flex-wrap[Bearbeiten]

Die Eigenschaft flex-wrap legt im Flexible Box Layout fest, ob sich die flexiblen Elemente an die Breite der Zeile anpassen sollen, oder ihre vorgegebene Breite darstellen sollen. In diesem Fall kommt es zu einem Zeilenumbruch.

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

Details: caniuse.com

Folgende Angaben sind möglich:

  • nowrap: flexible Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.
  • wrap: flexible Elemente brechen, wenn nötig, nach unten um.
  • wrap-reverse: flexible Elemente brechen, wenn nötig, nach oben um.
  • initial
  • inherit
Beispiel: Zeilenumbruch mit flex-wrap ansehen …
  section {
    display: flex;
  }
 
  .genau {
    flex-wrap: wrap;
  }
 
  .andersrum {
    flex-wrap: wrap-reverse;
  }

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.

Weblinks[Bearbeiten]