Depending on what browser you’re using to read this, and the amount of time passed since this was published, you’ll either see a nice collection of gray boxes or a blob of #debugpink in the CodePen above.

The W3C has recently been discussing the issue of percentage-based margins and paddings on flex items. The meat of the issue is that the W3C would prefer to keep Grid and Flexbox algorithms as similar as possible, to reduce confusion and make developers’ lives easier I guess.

The initial reason for the change was that Grid, as drafted and implemented by Microsoft, was the other way around. If they refuse to change Grid, and Blink refuses to change Flexbox, then we have a problem.

I’ve gone this far not explaining what the actual problem is. It’s a narrow one, and may not seem like such a small detail in the grand scheme of the Internet. The change referred to above is this line in the current Flexbox spec draft:

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

So if you use margin-top, margin-bottom, padding-top, or padding-bottom, with a percentage value, the containing block decides whether that value resolves against the main dimension or the cross dimension.

The animation below is intended to show the relationship between containers and child elements. On Chrome 43, both left and right animations appear the same. In Firefox 38.0.1, the Flexbox implementation appears to be broken, which will only display a red line on the right.

Fantasai proposes two resolutions for this problem on the blog CSS3.Info. Those both boil down to either resolve p/m-t/b against the height or width of the containing block (i.e., pick one). There have been suggestions from others in the mailing list, proposing an aspect-ratio property or similar, which I think would be weird (merely because it seems too ambiguous).

So, why not add a new flexbox-specific property to solve this problem?

flex-relation: main-axis | cross-axis | width | height | auto

The flex-relation property allows for changing the dimension that percentage margins and paddings are resolved against for flex items. The property applies to the flex container and affects all flex items.

main-axis

Flex items will always resolve their padding or margin size against the main dimension. For `row` and `row-reverse` flex containers, flex items resolve all percentage margins and paddings against the width of the flex container. For `column` and `column-reverse` flex containers, flex items resolve all percentage margins and paddings against the height of the flex container.

cross-axis

Flex items will always resolve their padding or margin size against the cross dimension. For `row` and `row-reverse` flex containers, flex items resolve all percentage margins and paddings against the height of the flex container. For `column` and `column-reverse` flex containers, flex items resolve all percentage margins and paddings against the width of the flex container.

width

Flex items will resolve all percentage margins and paddings against the width of the flex container, regardless of the flex container’s direction.

height

Flex items will resolve percentage margins and paddings against the height of the flex container, regardless of the flex container’s direction.

auto (default)

Flex items will resolve percentage margins and paddings against their respective dimensions.

I feel like margins and paddings are just a few potential uses of this property, and it could be expanded on for some interesting use cases.

I don’t know what the level of effort is to implement something like this, but I’d like to hear what others say about adding a new property. With flex-relation, Browser developers would be able to have different defaults for grid and flexbox if they want. Developers wouldn’t have to agree with those defaults and would have the power to adjust things to how they prefer. And my divs would be nice and square.

CSS3 introduces new ways to utilize current-day desktop graphics power, and one of these is the ability to render radial-style gradients (as well as other gradients, too). Of course, as with any new web technology, it’s not always intuitive or easy to pick up right off the bat. There are many different effects that can be achieved with radial gradients. Here are a few interesting techniques you can check out.

Coming out of the blue today, Microsoft’s monopolizing web browser, Internet Explorer, got an upgrade. The latest release candidate is now available for download, and it boasts new features, better compatibility, and better security than its predecessors. As a web designer, I’m obligated to try anything that could possibly eradicate the horrors caused by IE6, so I fired up the installer and tried it out so you don’t have to. Continue reading Internet Explorer 9 RC Now Available