PostCSS plugin to make flex cooler.
npm install postcss-flexupBasic 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent