CSS Regions allows you to define where your content flows, as opposed to blocking out where your content should not flow.
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.
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.
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.
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.