Adobe

decor

Web Platform Team Blog

Making the web awesome

Define flow areas directly with CSS Regions

CSS Regions allows you to define where your content flows, as opposed to blocking out where your content should not flow.

Indirect

CSS gives you many tools for defining where your content flows. But the tools available so far are indirect. You can use a float to say “don’t flow in this area.” Or you can use a margin to keep an area clear. You get one rectangular box for your content, and the tools let you cut away from the rectangle to make a more interesting shape.

Take this layout. An article flows through three areas, creating some visual interest. There are ways of achieving something like this layout now, but they are all indirect and have limitations.

layout

You can create this with margins (ignoring the blue boxes for the moment) – right margin to begin with, then left margin, then auto on the left and right sides. The main limitation with this method is that you have to break your content up into three pieces to have something to assign those margins to. So the height of these columns is fixed. Another limitation is that you’re defining the column width by subtracting the margin from the container size. Since you define a single margin value, you’re stuck with a particular length or percentage column width.

You could also create this with floats. You define the column size by subtracting the float width from the container size, so again you’re stuck with a particular length or percentage column width. The height can be flexible, though. You’d just have to add some clearing to the second float and the column heights could be determined by the float heights. But to maintain this height flexibility, you’d have to continue using (two) floats for the last centered column with more clearance. All of these floats would need to be at or near the beginning of the content, to make sure there are no gaps between the float areas where a line of text would take up the entire width of the container. That’s a lot to maintain just to say where your content doesn’t flow.

Direct

Unlike these indirect methods, CSS Regions allows you to define the three column areas directly. This has all sorts of advantages. You get the benefit of using min-width and max-width to create a flexible but still readable column width. Since the CSS Region for each column is a fully-stylable box, you can position the column using any CSS method you’d like, instead of relying on the quirks of a single feature like floats.

I’ve put a CodePen together that creates the layout above using CSS Regions and Flexbox. You can see how it works in Chrome Canary. Because each column is its own box, I can make the first two columns flex items. This allows me to give the column a min-width and max-width width that flexes as more or less space is available. And if a lot of space is available, the space between the column and the blue box can flex as well. I’ve used two flex containers to ensure that no more than two flex items are arranged next to each other.

The best part of using Flexbox is that if the available width is too small, the wrapping flex containers create a single-column layout for mobile without any changes to the widths I’ve defined. I do have one media query in the CodePen, but all it does is change the order of the second blue box so the mobile layout runs text-box-text-box-text. Try it out with different screen widths.

Future-Proof

The reason that I can create this layout using CSS Regions and Flexbox is because I define the region boxes directly. Flexbox does not have to know anything about CSS Regions – it just operates on the boxes inside the flex container. CSS Regions can participate in any new CSS feature that works on boxes (which tends to be most of them). So as CSS improves, you gain more and more expressive power by defining where your content flows directly using CSS Regions.

2 Comments

  1. May 22, 2013 at 5:01 am, A peek at the future | Ian Michael Roberts said:

    […] Adobe Labs are doing some very cool stuff with CSS layout modules and revealed an impressive demo last week using National Geographic content. The demo uses a combination of CSS regions and Flexbox to create a layout that allows content to flow. A deeper explanation of how this works can be found here. […]

  2. May 22, 2013 at 7:07 pm, David said:

    A very nice tip that will surely improve CSS styling. I’m a fan of adobe and I can say that you guys are really doing a very nice work. Keep it up! :)