Card list: Add flex layoutsHEADmaster

1 files changed, 25 insertions, 1 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8f96ce0..8f03c09 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -133,7 +133,6 @@
                         row-gap: props.get(vars.$quiet--row-gap);
                 }
 
-
                 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
                         @include bem.modifier($mod) {
                                 display:               grid;
@@ -150,6 +149,31 @@
                         }
                 }
 
+                @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
+                        @include bem.modifier($mod) {
+                                display:   flex;
+                                flex-flow: row wrap;
+                                gap:       props.get($row-gap) props.get($col-gap);
+
+                                @include bem.modifier('quiet') {
+                                        row-gap: props.get($quiet--row-gap);
+                                }
+
+                                @include bem.elem('card') {
+                                        flex:        0.1 0 auto;
+                                        inline-size: props.get($col-width);
+                                }
+
+                                @include media.media('<=#{$breakpoint}') {
+                                        flex-flow: column nowrap;
+
+                                        @include bem.elem('card') {
+                                                inline-size: auto;
+                                        }
+                                }
+                        }
+                }
+
                 @include bem.modifier('masonry') {
                         display:    block;
                         columns:    auto props.get(vars.$masonry--col-width);