diff --git a/components/01_Layouts/flexRow/_flexRow.scss b/components/01_Layouts/flexRow/_flexRow.scss index 583f782..65c463d 100644 --- a/components/01_Layouts/flexRow/_flexRow.scss +++ b/components/01_Layouts/flexRow/_flexRow.scss @@ -16,7 +16,6 @@ */ @mixin RV-FlexRow__Container--horizontal { flex-direction: row; - flex-wrap: wrap; } @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 */ @@ -54,14 +61,17 @@ &--vertical { @include RV-FlexRow__Container--vertical; } + + &--auto { + @include RV-FlexRow__Container--auto; + } } /* ########## * Item class ########### */ @mixin RV-FlexRow__Item { - min-width: min-content; - width: 100%; + flex-basis: max-content; @include RV-FlexRow__Item--normal; }