postcss-place-shorthands

PostCSS plugin to polyfill the CSS Box Alignment shorthands: place-<content|self|items>

Spec

place-content

place-self

place-items

How to use

Using this:

.single {
    place-content: space-between;
    place-self: flex-end;
    place-items: center;
}

.double {
    place-content: space-between unset;
    place-self: flex-start baseline;
    place-items: center stretch;
}

you will get (empty lines added for readability):

.single {
    align-content: space-between;
    justify-content: space-between;
    place-content: space-between;
    
    align-self: flex-end;
    justify-self: flex-end;
    place-self: flex-end;
    
    align-items: center;
    justify-items: center;
    place-items: center;
}

.double {
    align-content: space-between;
    justify-content: unset;
    place-content: space-between unset;
    
    align-self: flex-start;
    justify-self: baseline;
    place-self: flex-start baseline;
    
    align-items: center;
    justify-items: stretch;
    place-items: center stretch;
}

Installation

$ npm install postcss-place-shorthands

Usage

postcss([ require('postcss-place-shorthands') ])

Check how to use with Gulp, Grunt, Webpack, Node.js etc

Changelog

License

MIT