flexible box model

Explanation: These CSS declarations (display, box-orient, box-direction and more) allow you to position elements on a page without using floats. Sadly, they are only  partly supported in -webkit and -moz browsers at the time of this writing.

Current declarations include the following:

  • box-align
  • box-direction
  • box-flex
  • box-flex-group
  • box-lines
  • box-ordinal-group
  • box-orient
  • box-pack

Example CSS code:

Examine the web page itself for more examples. Just covering some of the basics below. It is a good idea to include a container division within a wrapper division if you want to experiment with these (Firefox behaves a bit differently than Safari if only one containing division is used).

#container {
display: -moz-box;
display: -webkit-box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;

Example page (view the source code): http://learning-html5.info/CSS3/CSS_FlexibleBoxModel.html (will work in Safari/ Chrome and Firefox browsers at the moment).


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.