Autoprefixer: -ms-flex-pack: justify is incorrect, space-between is the correct value

[mgol]

The following:

div {
    justify-content: space-between;
}

is translated by Autoprefixer (with default settings) to:

div {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

but there is no such thing as -ms-flex-pack: justify;. It should be space-between as with all other versions, see:
http://msdn.microsoft.com/en-us/library/ie/jj127304(v=vs.85).aspx

Compass 1.0.0.alpha.17 does it correctly.

[mgol]

FWIW, the issue can be workaround by specifying -ms-flex-pack directly. The following:

div {
    -ms-flex-pack: space-between;
    justify-content: space-between;
}

gets converted to:

div {
    -ms-flex-pack: space-between;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

[mgol]

The same with justify-content: flex-end - autoprefixer adds -ms-flex-pack: end whereas the correct form is -ms-flex-pack: flex-end.

[ai]

Thanks for a big review of Autoprefixer and a lot of issues :). Unfortunately, I can read and analyze them only tomorrow.

[ai]

Is this issue is based on IE 11 specs too? Can we close it?

[mgol]

Yup. The same, Compass is wrong here.

[ai]

According flexbox cheat sheet IE 10 required -ms-flex-pack: justify.

[mgol]

I reported an issue to Compass: https://github.com/chriseppstein/compass/issues/1509

[mgol]

@ai FYI, it was an error in my mixins, not Compass ones. Compass mixins in the 1.0.0 alpha version currently don't support Flexbox prefixing across different spec versions, see: http://beta.compass-style.org/reference/compass/css3/flexbox/

[egohead]

justify
is correct for IE10
space-between
is correct for IE11+