Skip to content

niceilm/flex-layout-sass

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flex Layout Sass

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(<direction [wrap]>, [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

example

@import "~flex-layout-sass/mixin";

.selector {
  @include fx-layout(row wrap, center center, 10px);
}

fx-flex

@include fx-flex(<flex-value>, [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

example

@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>);

  • order-value: int

refereces

example

@import "~flex-layout-sass/mixin";

.selector {
  @include fx-flex-order(1);
}

fx-flex-offset

@include fx-flex-offset(<offset-value>, [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

example

@import "~flex-layout-sass/mixin";

.selector {
  @include fx-flex-offset(10px);
}

fx-flex-align

@include fx-flex-align(<align-value>);

  • align-value: start, center, end, baseline, stretch

refereces

example

@import "~flex-layout-sass/mixin";

.selector {
  @include fx-flex-align(start);
}

fx-flex-fill

@include fx-flex-fill;

  • alias fx-fill

refereces

example

@import "~flex-layout-sass/mixin";

.selector {
  @include fx-flex-fill;
}

About

like angular flex-layout for sass

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages