Compass 1.0 doesn't use all prefixes for Flexb

问题:

I use Compass 1.0 and when I do @include display-flex; or any other flex related property I get only

display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;

etc. No -moz or -o prefixes. Any idea why?

回答1:

Opera has never used the -o- prefix for Flexbox. It was introduced under the Presto engine without prefixes. It wasn't until later that support for Flexbox properties (along with a few others) that the -webkit- prefix was also supported.

The Flexbox module that currently appears in the 1.0 alphas only emits the properties for the current Flexbox specification. Because of this, you won't be seeing the -moz- prefix either: the Mozilla engine only uses prefixes for the original Flexbox specification (eg. display: -moz-box). Mozilla supports the current specification without prefixes from 22.0 onwards (though support for flex-wrap didn't exist until 28.0). You also won't see the -ms-prefix because the IE versions that use prefixes support the older March 2012 draft (eg. display: -ms-flexbox).

Now, if you are interested in a set of mixins that are compatible with Compass that will cover all of your bases, I have written a few:

• Compatible with Compass 1.0 (slightly older version that shows usage)
• Compatible with Compass 0.12 (try it out on CodePen)