postcss-flex-alias

1.0.1 • Public • Published

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.

/postcss-flex-alias/

    Package Sidebar

    Install

    npm i postcss-flex-alias

    Weekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    7.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • tolking