CSS WG Blog Updated CSS Layout Modules: Flexbox, Templ…

Updated CSS Layout Modules: Flexbox, Template, Regions, GCPM

Last week the CSSWG published updates to four layout-related CSS specs:

CSS Flexbox ([css3-flexbox])

This module defines a linear layout mechanism similar to ordinary block layout, but specialized for applications and modern pages instead of documents.  Children of a flexbox can lay out in any direction, “flex” to fill up available space in either dimension, and even be completely visually reordered among their siblings.  The changes since the previous draft include the reintroduction of a multi-line mode, a substantial syntax change to the ‘flex-flow’ property (previously called ‘flex-direction’), and the start of a reworking of the layout algorithm.  Additionally, many small fixes and clarifications have gone into the new draft. Design-level feedback is welcome!

CSS Template ([css3-layout])

The module defines a mechanism to define one or more invisible grids, called “templates,” and then position the elements of a document into named slots in that grid. This allows elements to be placed in a visual order independent of their source order (as with absolute positioning) while still allowing them to be aligned to each other automatically. The changes since the previous draft include a chains property to combine multiple slots in a template into a single one, in order to create areas with complex and disjoint shapes; and a larger number of properties that apply to slots: the style of a slot in turn influences the style of the elements placed inside it (region-based styling).

CSS Regions ([css3-regions])

The module defines ways to (1) assign style to “regions” of the canvas, (2) create complex shaped regions out of multiple regions, and (3) position content into them. Various things might be used as regions, e.g., columns in a multi-column element or slots in a template/grid. The changes since the previous draft are noted in the document.

CSS GCPM ([css3-gcpm])

The module defines a number of features used often, but not exclusively, in print and other paged media: running headers and footers, leaders, cross references, footnotes, page floats, etc. Some of the features previously in this module have been moved to other modules: hyphenation to CSS3 Text; counters to CSS3 Lists. Other changes include ways to horizontally align leaders and a new feature to switch from scrolling overflow to paging it.

Template Layout relates closely to Grid Layout, Flexbox, and Regions; however, these high-level layout modules have yet to be fully integrated.

As always, send feedback to www-style with the spec code ([css3-flexbox], [css3-regions], [css3-layout], or [css3-gcpm]) and your comment topic in the subject line.

« Previous article Next article »