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

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, the Future of CSS syndicator, and the issue list on Github.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

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

By fantasai December 9, 2011 (Permalink)
Categories: publications

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 »

[Photo: group photo of the CSS working group in San Francisco] Contact: Bert Bos
Copyright © 2020 W3C®

Last updated 2011-12-09 00:30:31