Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

webpack justify-content can't add prefix

See original GitHub issue

.nav {
    display: flex;
    padding: 0 vw(35);
    height: vw(100);
    align-items: center;
    justify-content: space-around;
    background-color: #f6f6f6;
    color: #474342;
}

and the output:

.footer .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 5.46875vw;
    height: 15.625vw;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    background-color: #f6f6f6;
    color: #474342;
}

why justify-content can’t use, how to solve this problem?

Issue Analytics

State:
Created 6 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

aicommented, Dec 19, 2017

Yeap. Strange. I will look in the Friday.

0reactions

aicommented, Dec 22, 2017

I found the reason — there was no space-around value in 2009 spec https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack

Top Results From Across the Web

Prefixing flexbox styles for React - css - Stack Overflow

Do think React out of the box should have support for vendor prefixed values, as is, with inline styling alone you can't use...

Backwards compatibility of flexbox - CSS - MDN Web Docs

If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition...

Just-in-Time Mode - Tailwind CSS

The prefix option cannot detect complete class names when configured as a function. Because we don't generate class names in advance, we can...

Learn how to set up a SCSS build process with Gulp

There are several popular options, with webpack being one of the most ... the SCSS code. gulp-autoprefixer will add browser-specific prefixes for you, ......

List group · Bootstrap v5.3

Add .active to a .list-group-item to indicate the current active selection. ... <li class="list-group-item d-flex justify-content-between ...