angular flex-layout for sass version
npm install flex-layout-sassFlex Layout Sass
---
Angular Flex-Layout inspired
npm i flex-layout-sass
usages
sass import
@import "~flex-layout-sass/mixin";
mixin documents
fx-layout
* direction: row, column, row-reverse, column-reverse (default row)
* wrap: none, wrap (default none)
* main-axis-value: null, start, center, end, space-around, space-between, space-evenly
* cross-axis-value: null, start, center, end, space-around, space-between, space-evenly, stretch
* layout-gap-value: % | px | vw | vh$3
* fxLayout
* fxLayoutAlign
* fxLayoutGap$3
scss
@import "~flex-layout-sass/mixin";.selector {
@include fx-layout(row wrap, center center, 10px);
}
`fx-flex
* flex-value: "" | px | % | vw | vh | ,;
* parent-direction: row, column, row-reverse, column-reverse default row;
* If parent-direction is not set, the last direction value of fx-layout is used.$3
* fxFlex$3
scss
@import "~flex-layout-sass/mixin";.selector {
@include fx-flex;
}
.selector {
@include fx-flex(10px);
}
.selector {
@include fx-flex(auto);
}
.selector {
@include fx-flex(1 1 10px);
}
`fx-flex-order
* order-value: int$3
* fxFlexOrder$3
scss
@import "~flex-layout-sass/mixin";.selector {
@include fx-flex-order(1);
}
`fx-flex-offset
* offset-value: % (default) | px | vw | vh
* parent-direction: row, column, row-reverse, column-reverse default row;
* If parent-direction is not set, the last direction value of fx-layout is used.$3
* fxFlexOffset$3
scss
@import "~flex-layout-sass/mixin";.selector {
@include fx-flex-offset(10px);
}
`fx-flex-align
* align-value: start, center, end, baseline, stretch$3
* fxFlexAlign$3
scss
@import "~flex-layout-sass/mixin";.selector {
@include fx-flex-align(start);
}
`fx-flex-fill
* alias fx-fill$3
* fxFlexFill$3
scss
@import "~flex-layout-sass/mixin";.selector {
@include fx-flex-fill;
}
``