Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mgol opened this issue Jan 8, 2014 · 9 comments
Closed

Comments

@mgol
Copy link
Contributor

mgol commented Jan 8, 2014

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
Copy link
Contributor Author

mgol commented Jan 8, 2014

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
Copy link
Contributor Author

mgol commented Jan 8, 2014

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

@ai
Copy link
Member

ai commented Jan 8, 2014

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

@ai
Copy link
Member

ai commented Jan 8, 2014

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

@mgol
Copy link
Contributor Author

mgol commented Jan 8, 2014

Yup. The same, Compass is wrong here.

@mgol mgol closed this as completed Jan 8, 2014
@ai
Copy link
Member

ai commented Jan 8, 2014

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

@mgol
Copy link
Contributor Author

mgol commented Jan 8, 2014

I reported an issue to Compass: Compass/compass#1509

@mgol
Copy link
Contributor Author

mgol commented Jan 13, 2014

@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
Copy link

egohead commented Oct 24, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants