https://github.com/niceilm/flex-layout-sass
like angular flex-layout for sass
https://github.com/niceilm/flex-layout-sass
flex flex-layout mixin sass
Last synced: about 1 month ago
JSON representation
like angular flex-layout for sass
- Host: GitHub
- URL: https://github.com/niceilm/flex-layout-sass
- Owner: niceilm
- Created: 2018-06-17T06:13:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2026-01-12T07:54:25.000Z (5 months ago)
- Last Synced: 2026-01-12T17:51:18.600Z (5 months ago)
- Topics: flex, flex-layout, mixin, sass
- Language: SCSS
- Homepage:
- Size: 5.86 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Flex Layout Sass
---
[Angular Flex-Layout](https://github.com/angular/flex-layout) inspired
# install
```
npm i flex-layout-sass
```
# usages
## sass import
```
@import "~flex-layout-sass/mixin";
```
# mixin documents
## fx-layout
`@include fx-layout(, [main-axis-value [cross-axis-value]], [layout-gap-value]);`
* 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
### reference
* [fxLayout](https://github.com/angular/flex-layout/wiki/fxLayout-API)
* [fxLayoutAlign](https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API)
* [fxLayoutGap](https://github.com/angular/flex-layout/wiki/fxLayoutGap-API)
### example
```scss
@import "~flex-layout-sass/mixin";
.selector {
@include fx-layout(row wrap, center center, 10px);
}
```
## fx-flex
`@include fx-flex(, [parent-direction]);`
* 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.
### references
* [fxFlex](https://github.com/angular/flex-layout/wiki/fxFlex-API)
### example
```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
`@include fx-flex-order();`
* order-value: int
### refereces
* [fxFlexOrder](https://github.com/angular/flex-layout/wiki/fxFlexOrder-API)
### example
```scss
@import "~flex-layout-sass/mixin";
.selector {
@include fx-flex-order(1);
}
```
## fx-flex-offset
`@include fx-flex-offset(, [parent-direction]);`
* 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.
### refereces
* [fxFlexOffset](https://github.com/angular/flex-layout/wiki/fxFlexOffset-API)
### example
```scss
@import "~flex-layout-sass/mixin";
.selector {
@include fx-flex-offset(10px);
}
```
## fx-flex-align
`@include fx-flex-align();`
* align-value: start, center, end, baseline, stretch
### refereces
* [fxFlexAlign](https://github.com/angular/flex-layout/wiki/fxFlexAlign-API)
### example
```scss
@import "~flex-layout-sass/mixin";
.selector {
@include fx-flex-align(start);
}
```
## fx-flex-fill
`@include fx-flex-fill;`
* alias **fx-fill**
### refereces
* [fxFlexFill](https://github.com/angular/flex-layout/wiki/fxFlexFill-API)
### example
```scss
@import "~flex-layout-sass/mixin";
.selector {
@include fx-flex-fill;
}
```