postcss-flex-expand

Postcss plugin that expands flex to flex-grow,flex-shring,flex-basis.

Usage no npm install needed!

<script type="module">
  import postcssFlexExpand from 'https://cdn.skypack.dev/postcss-flex-expand';
</script>

README

postcss-flex-expland

resolve flexibility cannot calculate flex: 1;

Postcss plugin that explands flex to flex-grow,flex-shrink,flex-basis.

Install

# use npm
npm install --save-dev postcss-flex-expand

or

# use yarn
yarn add --save-dev postcss-flex-expand

Usage

const postcss = require('postcss');
const flexExpand = require('postcss-flex-expand');

postcss([
    flexExpand()
])
/* before */
.flex-item {
    flex: 1;
}

/* after */
.flex-item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    flex: 1;
}