Para establecer la distancia mínima entre los elementos de flexbox que estoy usando margin: 0 5pxdentro .itemy fuera margin: 0 -5pxdel contenedor. Para mí parece un truco, pero no puedo encontrar una mejor manera de hacerlo.

Ejemplo

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

• Flexbox no tiene márgenes colapsados.
• Flexbox no tiene nada parecido a las border-spacingtablas (excepto la propiedad CSS gapque no es compatible con Safari, caniuse )

Por tanto, lograr lo que estás pidiendo es un poco más difícil.

En mi experiencia, la forma "más limpia" que no usa :first-child/ :last-childy funciona sin ninguna modificación flex-wrap:wrapes colocándola padding:5pxen el recipiente y margin:5pxen los niños. Eso producirá una 10pxbrecha entre cada niño y entre cada niño y su padre.

Manifestación

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Esto no es un truco. Bootstrap y su cuadrícula también usan la misma técnica, aunque en lugar de margin, bootstrap usa padding para sus columnas.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

Flexbox y css calc con soporte para múltiples filas

Hola, a continuación se muestra mi solución de trabajo para todos los navegadores que admiten flexbox. Sin márgenes negativos.

Demostración de violín

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

Tenga en cuenta que este código puede ser más corto usando SASS

Actualización 2020.II.11 Columnas alineadas en la última fila a la izquierda

Actualización 2020.II.14 Eliminado margen inferior en la última fila

Puede usarlo & > * + *como selector para emular un flex-gap(para una sola línea):

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

Si necesita admitir la envoltura flexible , puede usar un elemento de envoltura:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

Puede utilizar bordes transparentes.

He contemplado este problema al intentar crear un modelo de cuadrícula flexible que puede recurrir a un modelo de tablas + tabla-celda para navegadores más antiguos. Y los Bordes para canalones de columnas me parecieron la mejor opción adecuada. es decir, las celdas de tabla no tienen márgenes.

p.ej

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

También tenga en cuenta que necesita min-width: 50px;flexbox. El modelo flexible no manejará tamaños fijos a menos que lo haga flex: none;en el elemento secundario particular que desea como fijo y, por lo tanto, excluido de ser "flexi". http://jsfiddle.net/GLpUp/4/ Pero todas las columnas junto con flex:none;ya no es un modelo flexible. Aquí hay algo más cercano a un modelo flexible: http://jsfiddle.net/GLpUp/5/

Por lo tanto, puede usar márgenes normalmente si no necesita el respaldo de celda de tabla para navegadores más antiguos. http://jsfiddle.net/GLpUp/3/

El ajuste background-clip: padding-box;será necesario cuando utilice un fondo, ya que de lo contrario el fondo fluirá hacia el área del borde transparente.

Esta solución funcionará para todos los casos, incluso si hay varias filas o cualquier número de elementos. Pero el recuento de la sección debe ser el mismo que desea 4 en la primera fila y 3 en la segunda fila, no funcionará de esa manera, el espacio para el cuarto contenido estará en blanco y el contenedor no se llenará.

Estamos usando display: grid; y sus propiedades.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

La desventaja de este método es que Mobile Opera Mini no será compatible y en PC esto funciona solo después de IE10 .

Nota para la compatibilidad completa del navegador, incluido IE11, utilice Autoprefixer

ANTIGUA RESPUESTA

No lo considere una solución antigua, sigue siendo una de las mejores si solo desea una fila de elementos y funcionará con todos los navegadores.

Este método lo utiliza la combinación de hermanos de CSS , por lo que también puede manipularlo de muchas otras formas, pero si su combinación es incorrecta, también puede causar problemas.

.item+.item{
  margin-left: 5px;
}

El siguiente código hará el truco. En este método, no hay necesidad de dar margin: 0 -5px;a la #boxenvoltura.

Una muestra de trabajo para ti:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

gapPropiedad CSS :

¡Hay una nueva gappropiedad CSS para diseños de cuadrícula, flexbox y de varias columnas que funciona en algunos navegadores ahora! (Consulte ¿Puedo usar el enlace 1 ; enlace 2 )?

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Al momento de escribir, esto funciona en Firefox, Chrome y Edge, pero no en Safari.

Digamos que si desea establecer un 10pxespacio entre los elementos, puede establecerlo .item {margin-right:10px;}para todos y restablecerlo en el último.item:last-child {margin-right:0;}

También puede usar el selector de hermano general ~o el siguiente +hermano para establecer el margen izquierdo en los elementos excluyendo el primero .item ~ .item {margin-left:10px;}o usar.item:not(:last-child) {margin-right: 10px;}

Flexbox es tan inteligente que recalcula automáticamente y distribuye equitativamente la cuadrícula.

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Si desea permitir la envoltura flexible , consulte el siguiente ejemplo.

body {
  margin: 0;
}

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

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Encontré una solución que se basa en el selector general de hermanos ~, y permite un anidamiento infinito.

Vea este lápiz de código para ver un ejemplo de trabajo

Básicamente, dentro de los contenedores de columna, cada niño que está precedido por otro niño obtiene un margen superior. Del mismo modo, dentro de cada contenedor de filas, cada niño que esté precedido por otro obtiene un margen izquierdo.

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}

<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

Continuando con la respuesta de sawa, aquí hay una versión ligeramente mejorada que le permite establecer un espacio fijo entre los elementos sin el margen circundante.

http://jsfiddle.net/chris00/s52wmgtq/49/

También se incluye la versión Safari "-webkit-flex".

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

Actualizar

Chrome 84 ahora admite gappropiedades.

Respuesta original

Según #ChromDevSummit, hay una implementación de gappropiedad para Flexbox, aunque en este momento (14 de noviembre de 2019) solo es compatible con Firefox, pero debería implementarse en Chrome pronto:

Demo en vivo

Actualizaré mi respuesta una vez que llegue a Chrome también.

Un contenedor flexible con margen -x (negativo) y elementos flexibles con margen x (positivo) o relleno conducen al resultado visual deseado: los elementos flexibles tienen un espacio fijo de 2x solo entre sí.

Parece ser simplemente una cuestión de preferencia, ya sea usar margen o relleno en los elementos flexibles.

En este ejemplo, los elementos flexibles se escalan dinámicamente para preservar el espacio fijo:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

He usado esto para columnas de ancho fijo y envuelto. La clave aquí escalc()

Muestra de SCSS

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

Muestra completa de Codepen

Eventualmente agregarán la gappropiedad a flexbox. Hasta entonces, podría usar la cuadrícula CSS en su lugar, que ya tiene la gappropiedad, y solo tiene una sola fila. Mejor que lidiar con los márgenes.

Usando Flexbox en mi solución, usé la justify-contentpropiedad para el elemento principal (contenedor) y especifiqué los márgenes dentro de la flex-basispropiedad de los elementos. Consulte el fragmento de código a continuación:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}

<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

Con flexbox, crear canaletas es un dolor, especialmente cuando se trata de envolver.

Necesita usar márgenes negativos ( Mejor forma de establecer la distancia entre los elementos de la caja flexible ):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... o alterar el HTML ( como se muestra en otra respuesta ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... o algo mas.

En cualquier caso, necesita un truco feo para que funcione porque flexbox no proporciona una flex-gapcaracterística " " ( al menos por ahora ).

Sin embargo, el problema de las canaletas es simple y fácil con CSS Grid Layout.

La especificación de cuadrícula proporciona propiedades que crean espacio entre los elementos de la cuadrícula, ignorando el espacio entre los elementos y el contenedor. Estas propiedades son:

• grid-column-gap
• grid-row-gap
• grid-gap (la abreviatura de ambas propiedades arriba)

Recientemente, la especificación se ha actualizado para cumplir con el Módulo de alineación de caja CSS , que proporciona un conjunto de propiedades de alineación para usar en todos los modelos de caja. Entonces las propiedades ahora son:

• column-gap
• row-gap
• gap (taquigrafía)

Sin embargo, no todos los navegadores compatibles con Grid admiten las propiedades más nuevas, por lo que usaré las versiones originales en la siguiente demostración.

Además, si se necesita espacio entre los elementos y el contenedor, paddingen el contenedor funciona bien (vea el tercer ejemplo en la demostración a continuación).

De la especificación:

10.1. Canales: los row-gap, column-gapy gap propiedades

Las propiedades row-gapy column-gap(y su gapabreviatura), cuando se especifican en un contenedor de cuadrícula, definen los medianiles entre las filas de cuadrícula y las columnas de cuadrícula. Su sintaxis se define en CSS Box Alignment 3 §8 Gaps Between Boxes .

El efecto de estas propiedades es como si las líneas de cuadrícula afectadas adquirieran grosor: la pista de cuadrícula entre dos líneas de cuadrícula es el espacio entre las canaletas que las representan.

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}

<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Más información:

• Soporte del navegador para CSS Grid
• Facilitar la definición de márgenes que solo se aplican entre elementos flexibles (discusión)
• Espaciado entre elementos de caja flexible

Por qué no hacerlo así:

.item + .item {
    margin-left: 5px;
}

Esto usa el selector de hermanos adyacente , para dar a todos los .itemelementos, excepto al primero a margin-left. Gracias a flexbox, esto incluso da como resultado elementos igualmente anchos. Esto también podría hacerse con elementos colocados verticalmente y margin-top, por supuesto.

Aquí está mi solución, que no requiere configurar ninguna clase en los elementos secundarios:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

Uso:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

La misma técnica se puede usar para filas y columnas flexibles normales además del ejemplo en línea dado anteriormente, y se puede extender con clases para espacios distintos a 4px.

A menudo uso el operador + para tales casos

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Encuentro que la forma más fácil de hacer esto es con porcentajes y simplemente permitiendo que el margen cuente su ancho

Esto significa que terminará con algo como esto si estaba usando su ejemplo

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Significa que sus valores se basan en el ancho, lo que podría no ser bueno para todos.

Aquí hay una cuadrícula de elementos de la interfaz de usuario de la tarjeta con el espaciado completado con un cuadro flexible:

Me frustraba espaciar manualmente las tarjetas manipulando el relleno y los márgenes con resultados dudosos. Así que aquí están las combinaciones de atributos CSS que he encontrado muy efectivas:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}

<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

Espero que esto ayude a la gente, presente y futura.

Columnify: una clase individual para N columnas

Flexbox y SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox y CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}

<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

Juega con él en JSFiddle .

Podrías usar la nueva propiedad gap. Copio pego la explicación que encontré en este artículo , así como más información

El diseño de la cuadrícula CSS ha tenido un espacio (anteriormente, un espacio en la cuadrícula) durante algún tiempo. Al especificar el espaciado interno de un elemento contenedor en lugar del espaciado alrededor de los elementos secundarios, gap resuelve muchos problemas comunes de diseño. Por ejemplo, con gap, no tiene que preocuparse por los márgenes de los elementos secundarios que causan espacios en blanco no deseados alrededor de los bordes de un elemento contenedor:

Desafortunadamente, en este momento, solo FireFox admite brechas en diseños flexibles.

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>

Solo use .item + .itemen el selector para que coincida con el segundo.item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Encontré un truco porque realmente lo necesito.

/* grid */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Aquí hay una cuadrícula de publicaciones con agradables categorías de crecimiento flexible también. Creo que te gustará. Ver Codepen

Asumiendo:

• Quieres un diseño de cuadrícula de 4 columnas con envoltura
• El número de elementos no es necesariamente un múltiplo de 4

Establezca un margen izquierdo en todos los elementos excepto el 1º, 5º, 9º, etc. y establezca un ancho fijo en cada artículo. Si el margen izquierdo es de 10 px, entonces cada fila tendrá un margen de 30 px entre 4 elementos, el ancho porcentual del elemento se puede calcular de la siguiente manera:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Esta es una solución decente para problemas relacionados con la última fila de flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

De hecho, existe una forma agradable, ordenada y solo de CSS de hacer esto (que uno puede considerar "mejor").

De todas las respuestas publicadas aquí, solo encontré una que usa calc () con éxito (por Dariusz Sikorski). Pero cuando se planteó con: "pero falla si solo hay 2 elementos en la última fila" no hubo solución expandida.

Esta solución aborda la pregunta del OP con una alternativa a los márgenes negativos y aborda el problema planteado a Dariusz.

notas:

• Este ejemplo solo demuestra un diseño de 3 columnas
• Se utiliza calc()para permitir que el navegador haga las matemáticas de la manera que desee 100%/3 (aunque el 33,3333% debería funcionar igual de bien) y (1em/3)*2 (aunque .66em también debería funcionar bien) .
• Se usa ::afterpara rellenar la última fila si hay menos elementos que columnas.

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}

<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

También en https://codepen.io/anon/pen/rqWagE

No funcionará en todos los casos, pero si tiene anchos secundarios flexibles (%) y conoce el número de elementos por fila, puede especificar de manera muy clara los márgenes de los elementos necesarios utilizando nth-childselector / s.

Depende en gran medida de lo que entiendas por "mejor". De esta manera no se requiere un marcado de envoltorio adicional para elementos secundarios o elementos negativos, pero ambas cosas tienen su lugar.

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

Me encontré con el mismo problema antes, luego encontré la respuesta para esto. Espero que ayude a otros para futuras referencias.

respuesta larga corta, agregue un borde a los elementos flexibles de su hijo. luego puede especificar márgenes entre elementos flexibles a lo que quiera. En el fragmento, uso el negro con fines ilustrativos, puede usar "transparente" si lo desea.

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>