Extract mixin to add a gap to a flexbox layout

This way we remove duplication and it'll be easier to add better support
for RTL languages.

In a few years this might not be necessary since support for the `gap`
property in a flexbox layout will improve. At the time of writing,
however, only 86.5% of the browsers support it [1].

[1] https://caniuse.com/flexbox-gap

app/assets/stylesheets/admin/machine_learning/settings.scss

@@ -1,13 +1,10 @@
 .admin .machine-learning-settings {
 
   .settings-management {
-    $gap: rem-calc(map-get($grid-column-gutter, medium));
+    @include flex-with-gap;
-    display: flex;
     flex-wrap: wrap;
-    margin-left: -$gap;
 
     > * {
-      margin-left: $gap;
       flex-basis: calc((#{rem-calc(720)} - 100%) * 999);
       flex-grow: 1;
     }

app/assets/stylesheets/admin/poll/questions/filter.scss

@@ -1,13 +1,8 @@
 .admin .poll-questions-filter {
   $gap: 0.5em;
+  @include flex-with-gap($gap);
   align-items: flex-end;
-  display: flex;
   flex-wrap: wrap;
-  margin-left: -$gap;
-
-  > * {
-    margin-left: $gap;
-  }
 
   [type="submit"] {
     @include regular-button;

app/assets/stylesheets/admin/table_actions.scss

@@ -1,10 +1,7 @@
 .admin .table-actions {
+  @include flex-with-gap(1.6em);
   align-items: flex-start;
-  display: flex;
+  padding: 0 0.5em;
-
-  > :not(:first-child) {
-    margin-left: rem-calc(10);
-  }
 
   a,
   button {
@@ -13,7 +10,6 @@
     flex-direction: column;
     font-size: 0.9em;
     line-height: $global-lineheight;
-    margin-right: 1em;
     text-align: center;
 
     &:hover,

app/assets/stylesheets/budgets/executions/filters.scss

@@ -2,14 +2,8 @@
   margin-bottom: $line-height / 2;
 
   @include breakpoint(medium) {
-    $gap: 1em;
+    @include flex-with-gap(1em);
     align-items: flex-end;
-    display: flex;
-    margin-left: -$gap;
-
-    > * {
-      margin-left: $gap;
-    }
   }
 
   select {

app/assets/stylesheets/budgets/groups_and_headings.scss

@@ -2,10 +2,9 @@
   $spacing: $line-height / 2;
 
   .headings-list {
-    display: flex;
+    @include flex-with-gap($spacing);
     flex-wrap: wrap;
     list-style: none;
-    margin-left: -$spacing;
   }
 
   .heading {
@@ -14,7 +13,6 @@
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
-    margin-left: $spacing;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
     position: relative;

app/assets/stylesheets/budgets/phases.scss

@@ -179,12 +179,9 @@
     margin-top: $line-height;
 
     @include breakpoint(medium) {
-      $gap: rem-calc(map-get($grid-column-gutter, "medium"));
+      @include flex-with-gap;
-      display: flex;
-      margin-left: -$gap;
 
       > * {
-        margin-left: $gap;
         width: 50%;
       }
 

app/assets/stylesheets/layout/locale_switcher.scss

@@ -57,14 +57,8 @@
   }
 
   ul {
-    $gap: 0.75em;
+    @include flex-with-gap(0.75em);
-    display: flex;
     flex-wrap: wrap;
-    margin-left: -$gap;
-
-    > * {
-      margin-left: $gap;
-    }
 
     li::after {
       content: none;

app/assets/stylesheets/mixins/layouts.scss

@@ -23,6 +23,15 @@
   }
 }
 
+@mixin flex-with-gap($gap: rem-calc(map-get($grid-column-gutter, medium))) {
+  display: flex;
+  margin-left: -$gap;
+
+  > * {
+    margin-left: $gap;
+  }
+}
+
 @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) {
   $global-padding: rem-calc(map-get($grid-column-gutter, medium)) / 2;
   bottom: 0;

app/assets/stylesheets/widgets/feeds/participation.scss

@@ -1,8 +1,6 @@
 .feeds-participation {
-  $gap: rem-calc(map-get($grid-column-gutter, medium));
+  @include flex-with-gap;
-  display: flex;
   flex-wrap: wrap;
-  margin-left: -$gap;
 
   .feed-proposals {
     flex-basis: rem-calc(480);
@@ -17,7 +15,6 @@
   .feed-proposals,
   .feed-debates {
     display: flex;
-    margin-left: $gap;
     margin-top: $line-height;
     flex-direction: column;