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;
display: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).

References:

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>