Search code examples
vue.jsflexboxpostcssvue-cliautoprefixer

Vue cli 3 postcss display:flex issue

My Setup
vue cli 3 all default config ( autoprefixer, postcss, etc )

My problem
with Samsung internet version > 7 a css input of display:flex is only outputting "display: ms-flexbox" and I need "display: -webkit-flex" to showup.. which won't despite any arrangement of config options and browser lists I seem to test out... not sure what I am missing here.

The effect
my vue spa sidenav menu has messed up layouts only on samsung internet, I determined that it is because it needs the -webkit-flex prefix which I cannot seem to produce

Sample of my package.json setup with browserlist

I'm sure that the "browsers" config item under "autoprefixer" is redundant, my output is the same with and without it.

Taking out "no-2009" only adds a "display: -webkit-box" that does not help out at all

Solution

  • In the GitHub issue, you used justify-content: space-evenly; in your code example.

    justify-content: space-evenly; is most likely your issue. It doesn't have full support across all browsers yet.

    You have listed that you need to support the last 2 versions of IE. That means IE 10 & 11. I'm pretty sure that neither of those browsers support justify-content: space-evenly; since it was a late addition to the spec. If you test in those browsers it should look broken there as well.

    Add justify-content: space-around; above it as a back-up. It works in almost the same way but distributes the space a bit differently.

    ul {
  justify-content: space-around;
  justify-content: space-evenly;
  /* ... The rest of the CSS... */
}

    It needs to be placed in that order so that if the browser supports it, it will use justify-content: space-evenly; and if not, it will fall-back to using justify-content: space-around;.

    It won't look as nice in the browsers that need the fallback as it does in the browsers that don't need it. It will look much better with the fallback than without it though.