Q:

Flexbox Responsive Layout with multiple Columns and Rows: Best practice to realize a "column-gap"?

The perfect solution for my task would be the property column-gap, but it is not yet supported for flexboxes widely.
So I need a hack to improvise the function.
Which is please the best practice to do that?
My wish is to use justify-content: space-between;. 
That means e.g. for 4 objects in one row: 
The first object has no margin left, and the last object in the row has no margin right. And of course, there should be a minimum horizontal gap between the objects.
That means for 1 object in one row (small displays):
As well no margin left and no margin right.
I tried to use a combination of margin, padding and pseudo-classes like last-child. But the result is, that you have to reset all those rules, when the display is so small, that only one single column can be displayed.
Minimal code

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

div {
  flex: 1;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

I'm looking for an elegant way to solve the problem. Where you do have to reset many rules with a media query for a width, where only one object fits into a row.
Thanks for your help.

A:

I think I understood what you wanted, why do you specifically want to use justify-content: space-between though ?
The simplest way to achieve what you want is to use a negative margin-left (let's say 1em) on the parent flex container and margin-left: 1em and margin-bottom: 1em on the flex children. The margin-left value of the flex children must be identical to the nevagive margin-left value of the flex container.

* {
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1em;
}

.flex-item {
    flex: 1;
    background: #ccc;
    border-radius: 3px;
    text-align: center;
    padding: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
}
<div class="flex-container">
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
  <div class="flex-item">Lorem ipsum dolor sit amet lorem ipsum dolor</div>
</div>

You can set a min-width on the children as well if you wish.

Following your comment and after seeing your design I spotted some mistakes. You'll find a code snippet below that shows you the correct way to implement your design.
Couple suggestions :

Avoid using ids (#) as they are too specific and difficult to override. Favor classes and attributes selectors. 
Set your box model to box-sizing: border-box, it makes working with margins, paddings and calculating layouts much easier (see this article on box-sizing by Marie Mosley for further explanations)
If you are using negative margins on a container don't give it a background-color or border as that will break your layout (that's what happened here when you gave #vorschau negative margins and a background). Set the background, border, etc. on a parent container.

* {
    box-sizing: border-box;
}

body {
    background: rgb(220, 220, 220);
    font-family: Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
}

h1, p {
  margin: 0;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.seite {
    margin: 0 auto;
    max-width: 70em;
    background: #FAF2D5;
}

.huelle {
    padding: 1.5em 2em;
}

.vorschau-container {
    background: white;
    border: 1px solid gray;
    margin: 1em 0;
}

.vorschau {
    margin-left: -2em;
    margin-bottom: -2em;
}

.vorschau figure {
    margin: 0 0 2em 2em;
    text-align: center;
}

.vorschau img {
    max-width: 14.5em;
    border: 0.6em solid rgb(231, 231, 231);
}
<body class="galerie" cz-shortcut-listen="true">
 <div class="seite">
  <div class="huelle">
   <h1>Lorem Ipsum</h1>
   <div class="vorschau-container">
    <div class="vorschau flex-container">
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Aufenthalt "Süd"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Bad "2. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Doppelzimmer</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Eingangsbereich</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Aufenthalt "1. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Küche "2. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Küche "1. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Aufenthalt "2. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Bad "1. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Bad "1. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Bad "1. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Bad "1. Quer"</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Seminarwhg./Teeküche</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Seminarwhg./Lounge</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Seminarraum</figcaption>
     </figure>
     <figure>
      <a href="#"><img src="https://via.placeholder.com/400x400" alt=""></a>
      <figcaption>Seminarwhg./Zimmer</figcaption>
     </figure>
    </div>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula orci vitae felis congue porta. Maecenas finibus fermentum erat. Aenean pulvinar consequat arcu, ut pulvinar diam scelerisque non. Duis dapibus, mi nec pulvinar egestas, risus justo vehicula neque, in vestibulum turpis urna nec lacus.</p>
  </div>
 </div>
</body>

If you need further explanations ask in the comments ;)

