Flex - display
Code Sources Icon Code Sources Icon

Ein Versuch die wichtigsten "flexbox"-Eigenschaften in Zusammengang mit Anleitung und Anregung im Editor darzustellen.

Welche Browser können FlexBox darstellen: http://caniuse.com/#feat=flexbox


Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Anregung

Wird die Breite des Browserfenster verändert, verhalten sich FlexBox-Elemente dynamisch. Sie skalieren ihre Breite "flexibel", sobald ihre Maximalbreite unterschritten wird.

Das #container-Element enthällt die Eigenschaft "display:flex;", sie ist verantwortlich dass die darin liegenden Boxen:

  • sich der Höhe des Containers anpassen
  • eine eigene Breite besitzen können
  • sich bei veränderter Breite des Containers, dynamisch anpassen

Entferne im Container:

display:flex;

und teste das veränderte Verhalten der Boxen, mit und ohne die "flex"-Eigenschaft.

DB-Table: flexgrundlagen