postcss-flex-alias

easily write flex

Usage no npm install needed!

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

README

PostCSS flex-alias Build Status

PostCSS plugin easily write flex

Documentation

Click on the Documentation to learn more

Explain

display: flex-[flex-flow][justify-content][align-items][align-content]

flex-flow

  • x: row nowrap
  • y: column nowrap
  • w: row wrap
  • m: column warp

justify-content

  • s: flex-start
  • a: space-around
  • b: space-between
  • c: center
  • e: flex-end

align-items

  • s: flex-start
  • b: baseline
  • c: center
  • e: flex-end
  • h: stretch

align-content

  • s: flex-start
  • a: space-around
  • b: space-between
  • c: center
  • e: flex-end

Example

/* input */
.foo {
  display: flex-xcc;
}

 /* output */
.foo {
  display: flex;
  justify-content: center;
  align-items: center;
}

 /* input */
.foo {
  display: flex-wbc;
}

/* output */
.foo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

Usage

postcss([ require('postcss-flex-alias') ])

// or postcss.config.js
plugins: {
  'postcss-flex-alias': {}
}

See PostCSS docs for examples for your environment.