Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

15. Flexible Box Layout > Grouping Flexible Boxes

Grouping Flexible Boxes

As well as individual boxes being resized according to their box-flex values, you can also create groups of boxes that will be resized jointly using the box-flex-group property. This property has the following syntax:

E { box-flex-group: number; }

In the case of this property, the number value is a single integer that creates a numbered group; all elements with the same value are considered part of the same group. The default value is 1, so unless otherwise specified, all elements belong to this group. When the elements are resized to fit their parent, all elements in the same group are given the same size. Groups with lower numbers are given priority.

Before I give some examples, a quick aside about browser support: Firefox and the latest preview version of IE9 have no implementation of the property at all, and WebKit’s doesn’t work according to the specification. In WebKit, all elements in the group with the lowest box-flex-group value are considered flexible, and their individual box-flex values apply; all elements in other numbered groups are not flexible, meaning they act as if they have a box-flex value of 0.


You are currently reading a PREVIEW of this book.


Get instant access to over $1 million worth of books and videos.


Start a Free 10-Day Trial

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint