reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

typical flexbox behavior

Browse Source
This commit is contained in:
reverend 2020-12-27 23:47:35 +01:00
parent b2b32b190f
commit 46a428c516
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/01_Layouts/flexRow/_flexRow.scss
View File

@ -16,7 +16,6 @@
*/ */
@mixin RV-FlexRow__Container--horizontal { @mixin RV-FlexRow__Container--horizontal {
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
} }
@mixin RV-FlexRow__Container--vertical { @mixin RV-FlexRow__Container--vertical {
@ -39,6 +38,14 @@
} }
} }
/*
* Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
@mixin RV-FlexRow__Container--auto {
@include RV-FlexRow__Container--horizontal;
flex-wrap: wrap;
}
/* /*
* Shorthand for the modifiers above * Shorthand for the modifiers above
*/ */
@ -54,14 +61,17 @@
&--vertical { &--vertical {
@include RV-FlexRow__Container--vertical; @include RV-FlexRow__Container--vertical;
} }
&--auto {
@include RV-FlexRow__Container--auto;
}
} }
/* ########## /* ##########
* Item class * Item class
########### */ ########### */
@mixin RV-FlexRow__Item { @mixin RV-FlexRow__Item {
min-width: min-content; flex-basis: max-content;
width: 100%;
@include RV-FlexRow__Item--normal; @include RV-FlexRow__Item--normal;
} }