PostCSS plugin to make flex cooler.
npm install postcss-flexup
Basic example with gulp
gulpfile.js
gulp.task('buildcss', function () {
return gulp
.src('./src/main.css')
.pipe(
postcss([
require('postcss-flexup')
// ... other postcss plugins
])
)
.pipe(gulp.dest('./dist'));
});
src/main.css
.parent-1 {
flexup: _;
}
.parent-2 {
flexup: center 12px;
}
.parent-3 {
flexup: center/_ wrap 12px;
}
.parent-4 {
flexup: center/_ 12px/16px;
}
.parent-5 {
flexup: center/_ _/16px -col;
}
.parent-6 {
flexup: !center/_ wrap 12px;
}
.parent-7 {
flexup: !between/!center wrap !12px;
}
.parent-8 {
flexup: center/_ !-col;
}
will give:
.parent-1 {
display: flex;
}
.parent-2 {
display: flex;
justify-content: center;
align-items: center;
column-gap: 12px;
row-gap: 12px;
}
.parent-3 {
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 12px;
}
.parent-4 {
display: flex;
justify-content: center;
column-gap: 12px;
row-gap: 16px;
}
.parent-5 {
display: flex;
justify-content: center;
row-gap: 16px;
flex-direction: column-reverse;
}
.parent-6 {
display: flex;
justify-content: center !important;
flex-wrap: wrap;
column-gap: 12px;
row-gap: 12px;
}
.parent-7 {
display: flex;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap;
column-gap: 12px !important;
row-gap: 12px !important;
}
.parent-8 {
display: flex;
justify-content: center;
flex-direction: column-reverse !important;
}
Syntax:
flexup: <justify-content>/<align-items> <column-gap>/<row-gap> <flex-direction> <flex-wrap>;
Available values
- <justify-content>:
center
|start
|end
|between
|around
- <align-items>:
center
|start
|end
|between
|around
- <column-gap>: any value (e.g.
12px
) - <row-gap>: any value (e.g.
12px
) - <flex-direction>:
row
|-row
|col
|-col
("-" before row/col means reverse) - <flex-wrap>: wrap | nowrap
You can omit any value with _
(e.g. _/center
, 12px/_
)
You can write center
instead of center/center
when the value is the same
You can add !important
with !
in from of any value
flexup: !center;
flexup: around/!center !wrap;
flexup: !around/_ wrap 16px !row;
flexup: !around/_ wrap 12px/_ !-col;
If you only need display: flex;
you can write: flexup: _;
- โ Pull requests and โ Stars are always welcome.
- For bugs and feature requests, please create an issue.