molily: Flexible Box Layout

Beitrag lesen

Hallo,

ist es moeglich mit display:box und box-flex auch die Darstellung zu erreichen, das unter der Menuleiste ein div container definiert wird, der sich bis zum unteren Bildschrirm rand ausdehnt

Ja, klar. Das funktioniert genauso wie das menu-Beispiel, nur dass die Kinder der Box mit box-orient vertikal statt horizontal angeordnet werden. Das Inhalts-Element bekommt flex: 1, damit es den gesamten Bereich ausfüllt. Dazu muss body natürlich eine width und height von 100% haben.

http://jsfiddle.net/nRT9c/10/

Ich kenne das XUL Konzept von Mozilla und da ist es relative einfach, diesen Effekt zu erzielen, indem flex attribute 1 ist und overflow:auto.

Mit CSS ist es ganz genauso. XUL war das Vorbild für die gegenwärtige CSS-Flexbox-Umsetzung.

Zwei Einführungen:
http://www.html5rocks.com/en/tutorials/flexbox/quick/
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Mathias