How To Set Gaps (gutters) In A Flex Container?

I'm trying to create some kind of universal component of flex container. This component consists of container and its children in a row. If there are too many children in a line, t

Solution 1:

Flexbox isn't your best option here. As you describe, gutter solutions are clumsy and inefficient.

A clean and efficient solution is possible with CSS Grid.

Grid wins over flexbox in this area for now because Grid accepts the gap properties. These properties are not yet available in flex but, as browsers continue to implement the CSS Box Alignment Module, the gap properties will be available across multiple box models (including flex).

§ Gaps Between Boxes

While margin and padding can be used to specify visual spacing around individual boxes, it’s sometimes more convenient to globally specify spacing between adjacent boxes within a given layout context, particularly when the spacing is different between boxes as opposed to between the first/last box and the container’s edge.

The gap property, and its row-gap and column-gap sub-properties, provide this functionality for multi-column, flex, and grid layout.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.item {
  padding: 10px;
  background-color: red;
}

body {
  margin: 0;
}

<divclass="container"><divclass="wrapper"><divclass="item">Width of items can vary</div><divclass="item">This example works</div><divclass="item">But there is a problem</div><divclass="item">Dye to overlow:hidden</div><divclass="item">It is impossible to place here</div><divclass="item">Overflowing content</div><divclass="item">Such as dropdowns</div></div></div>

jsFiddle demo

Solution 2:

To avoid the scrollbar to show, you may set your negative margin on the left and top only.

body {
  margin: 0;
}

.container {
  width:31.7em;
  max-width:100%;
  margin:auto;;
  background:yellow; 
}

.wrapper {
   display: flex;
  flex-wrap: wrap;
  margin-left:-10px;
  margin-top:-10px;
}

.item {
  flex: 00 auto;  
  padding: 10px;  
  background-color: red;  
  margin:10px0010px;
}

<divclass="container"><divclass="wrapper"><divclass="item">Width of items can vary</div><divclass="item">This example works</div><divclass="item">But there is a problem</div><divclass="item">Dye to overlow:hidden</div><divclass="item">It is impossible to place here</div><divclass="item">Overflowing content</div><divclass="item">Such as dropdowns</div></div></div>

or negative right margin if document dir is rtl

body {
  margin: 0;
  direction:rtl;
}

.container {
  width:31.7em;
  max-width:100%;
  margin:auto;;
  background:yellow; 
}

.wrapper {
   display: flex;
  flex-wrap: wrap;
  margin-right:-10px;
  margin-top:-10px;
}

.item {
  flex: 00 auto;  
  padding: 10px;  
  background-color: red;  
  margin:10px10px00;
}

<divclass="container"><divclass="wrapper"><divclass="item">Width of items can vary</div><divclass="item">This example works</div><divclass="item">But there is a problem</div><divclass="item">Dye to overlow:hidden</div><divclass="item">It is impossible to place here</div><divclass="item">Overflowing content</div><divclass="item">Such as dropdowns</div></div></div>

Solution 3:

Use gap / row-gap / column-gap:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

See more here