CSS3

  • 200908 Oct

    Introducing the Flexible Box Layout module

    by Peter Gasston

    Posted in CSS3 Previews, Modules

    One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model:

    “… the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.”

    It’s probably easier if I show you how this works. NB: you’ll need to be using Firefox, Safari or Chrome (or a variant thereof) to see the demos; and if you’re reading this in a feed reader, you’ll need to visit the original post to see them.

    Update: It’s been pointed out in the comments that Gecko & WebKit display these demos differently. I’ll look into why that’s happening, but the demos still correctly illustrate the examples I’m providing.

    First of all, here’s a containing div with two children laid out in the standard model (I’ve added a background image on the container for clarity):

    Using the flexible box model it’s easy to distribute those two children equally inside the container:

    And here’s the code I used for that:

    .container {
    display: box;
    box-align: stretch;
	box-orient: vertical;
}

.container div { box-flex: 1; }

    NB: In fact I need -moz- and -webkit- prefixes for all of these, but I’ve left them out for clarity.

    So what I’ve done here is set the display to the new box value, told it to stretch vertically—that is, to the top and bottom—inside the container, and set the box-flex value to 1 to indicate that it should be flexible (0 means no flexibility, but higher values are also possible; more on that shortly).

    By changing the box-orient value, I can easily make them flex and stretch horizontally:

    .container { box-orient: horizontal; }

    Giving both of the children the same box-flex value means that the unused space will be distributed evenly between them; however, you can also provide different values to create a distribution ratio:

    In this example I gave the first child a value of 2 and the second a value of 1, meaning the unused space was distributed 2:1 in favour of the first child:

    .child-one { box-flex: 2; }

.child-two { box-flex: 1; }

    You can also distribute elements evenly both horizontally and—finally!—vertically, by nesting horizontal and vertical containers, and using the box-align and box-pack properties:

    .container { box-pack: center; }

.container .container { box-align: center; }

.container div { box-flex: 0; }

    The module has many more properties for even more flexibility – this article is only a brief introduction.

    The spec is currently only a working draft, but it looks as if the implementations are already pretty stable so I hope that it moves swiftly to become a recommendation.

    I owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to me.

    Read more articles like this on my blog, Broken Links.



    Related Posts

    1. W3C Releases Two New Working Drafts
    2. Try out the CSS 3 Template Layout module

    You can skip to the end and leave a response.

  • Comments

Leave a Comment

(will not be published)

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
Meta
TAG CLOUD

Hosting by:

© 2009 WEBFLUX. All Rights Reserved. Theme by W3 EDGE, WordPress Experts