Melhor maneira de definir a distância entre os itens flexbox

para definir a distância mínima entre os itens flexbox que estou a usar margin: 0 5px em .item e margin: 0 -5px no contentor. Para mim, parece-me uma invasão, mas não consigo encontrar uma maneira melhor de fazer isto.

Exemplo 

#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>
 932
cssflexbox
Author: Salman A, 2013-12-17
Source

30 answers

    O Flexbox não tem margens em colapso.
  • Flexbox não tem nada parecido com {[[2]} para tabelas (excepto para a propriedade CSS gap que não é suportada no Safari, caniuse)
Por isso, conseguir o que está a pedir é um pouco mais difícil. Pela minha experiência, a maneira mais "limpa" que não usa :first-child/:last-child e funciona sem qualquer modificação em {[6] } é colocar padding:5px no recipiente e margin:5px nas crianças. Isso vai criar um fosso entre cada criança e entre cada criança e os seus pais.

Demonstração

.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>
 503
Author: Flimm, 2020-07-31 12:58:04
Isto não é uma invasão. A mesma técnica também é usada por bootstrap e sua grade, embora, em vez de margem, bootstrap usa estofamento para suas constipações. 
.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
 223
Author: Roumelis George, 2014-12-19 09:52:54

Flexbox e CSS calc com suporte a várias linhas

Olá, abaixo está a minha solução de trabalho para todos os navegadores que suportam flexbox. Sem margens negativas.

Demonstração Do Fiddle

   
.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>

tome nota que este código pode ser mais curto usando SASS

Actualização 2020.II. 11 Colunas alinhadas na última linha à esquerda

Actualização 2020.II. 14 Margem removida-fundo na última linha

 133
Author: Dariusz Sikorski, 2020-02-14 09:47:43

Pode utilizar & > * + * como selector para emular a flex-gap (para uma única linha): 

#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>

Se necessitar de suportar a embalagem flexível , poderá usar um elemento de embalagem: 

.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>
 113
Author: Do Async, 2019-08-21 13:09:23

Podes usar fronteiras transparentes.

Eu contemplei este problema ao tentar construir um modelo Flex grid que pode cair para um modelo tables + table-cell para navegadores mais antigos. E bordas para calhas de coluna pareciam - me a melhor escolha apropriada. isto é, as células da tabela não têm margens.

Por exemplo 

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

Note também que precisa de min-width: 50px; para a flexbox. O modelo flex não irá lidar com tamanhos fixos a menos que você faça flex: none; no elemento-filho em particular que você deseja como fixo e, portanto, excluído de ser "flexi". http://jsfiddle.net/GLpUp/4/ Mas todas as colunas juntamente com flex:none; já não é um modelo flex. Aqui está algo mais próximo de um modelo flex: http://jsfiddle.net/GLpUp/5/

Então você pode realmente usar as margens normalmente se você não precisa do fallback tabela-célula para navegadores mais antigos. http://jsfiddle.net/GLpUp/3/

A configuração background-clip: padding-box; será necessária ao usar um fundo, pois caso contrário o fundo irá fluir para o zona fronteiriça transparente.

 98
Author: hexalys, 2017-03-15 23:03:26

Esta solução funcionará para todos os casos, mesmo que existam várias linhas ou qualquer número de elementos. Mas a contagem da seção deve ser a mesma que você quer 4 na primeira linha e 3 é a segunda linha que não vai funcionar dessa forma o espaço para o quarto conteúdo será em branco O container não vai preencher.

Nós usáramos display: grid; e as suas propriedades.

#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>

a desvantagem deste método está no móvel O Opera Mini não será suportado e no PC isto só funciona depois de IE10 .

Nota para a compatibilidade completa do navegador, incluindo o IE11 por favor use o Autoprefixer

RESPOSTA ANTIGA

Não pense nisso como uma solução antiga, ainda é uma das melhores se você só quer uma única linha de elementos e vai funcionar com todos os navegadores.

Este método é utilizado por: associação aparentada CSS, então você pode manipulá-lo de muitas outras maneiras também, mas se sua combinação está errada, pode causar problemas também.

.item+.item{
  margin-left: 5px;
}
O código abaixo serve. Neste método, não há necessidade de dar margin: 0 -5px; para a #box embalagem.

Uma amostra de trabalho 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>
 83
Author: Jithin Raj P R, 2020-05-15 05:30:21

CSS gap propriedade:

Há um novo gap Propriedades do CSS para multi-colunas, flexbox e formatos de grelha que funcionam em alguns navegadores agora! (Ver se posso usar a ligação 1; ligação 2 . É abreviatura para row-gap e column-gap. 

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

A partir da escrita, isto funciona em Firefox, Cromo, e borda, mas não Safari.

CSS row-gap propriedade:

A row-gap propriedade CSS para ambos as disposições do flexbox e da grelha permitem-lhe criar um espaço entre linhas. Acho que o Safari ainda não o apoia.

#box {
   display: flex;
   row-gap: 10px;
}

CSS column-gap propriedade:

A column-gap a propriedade CSS para as disposições multi-colunas, flexbox e grid funciona, permitindo-lhe criar um intervalo entre as colunas. Acho que o Safari ainda não o apoia.

#box {
  display: flex;
  column-gap: 10px;
}
 71
Author: Flimm, 2021-01-22 14:24:21
Digamos que se você quiser definir o espaço entre os itens, você pode simplesmente definir {[[5]} para todos, e reiniciá-lo no último..item:last-child {margin-right:0;}

Também pode usar o selector da série aparentada ~ ou o selector da série aparentada seguinte + para definir a margem esquerda nos itens excluindo o primeiro .item ~ .item {margin-left:10px;} ou usar .item:not(:last-child) {margin-right: 10px;}

A Flexbox é tão inteligente que recalcula automaticamente e distribui igualmente a grelha.

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>

Se quiser permitir folha de flexão , ver o seguinte exemplo.

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>
 32
Author: Stickers, 2019-02-23 04:07:46

Eu encontrei uma solução que é baseada no selector geral de irmãos, ~, e permite o ninho infinito.

Veja esta caneta de código como exemplo de trabalho

Basicamente, dentro de contentores de colunas, cada criança que é precedida por outra criança recebe uma margem superior. Da mesma forma, dentro de cada recipiente de linha, cada criança que é precedida por outro recebe uma margem esquerda. 

.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>
 17
Author: Simon Epskamp, 2019-08-21 13:09:49

De acordo com #ChromeDevSummit existe uma implementação da propriedade {[[0]} para a Flexbox em Firefox e navegadores À Base de crómio .

Aqui está uma Demo ao vivo.
 16
Author: Eliya Cohen, 2021-01-29 16:30:33
Continuando com a resposta da sawa, aqui está uma versão ligeiramente melhorada que lhe permite definir um espaço fixo entre os itens sem a margem envolvente.

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

Também está incluída a versão 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>
 15
Author: chris, 2014-11-12 11:15:14

Um flex container com -x (negativo) margem e flex itens com x (positivo) margem ou preenchimento e ambos levam o visual desejado resultado: Flex itens tem um fixo lacuna de 2x apenas entre uns com os outros.

Parece ser apenas uma questão de preferência, quer se use margem ou enchimento nos itens flexíveis.

Neste exemplo, os itens flex são dimensionados dinamicamente, a fim de preservar o fixo intervalo: 

.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;
}
 11
Author: Tim, 2015-11-09 16:37:51

Usei isto para colunas de largura fixas e enroladas. A chave aqui é:calc()

Amostra 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});}

}

Amostra completa de Codepeno

 10
Author: Veiko Jääger, 2014-12-23 14:05:44

Eventualmente irão adicionar a propriedade {[[0]} à flexbox. Até lá, você poderia usar a grelha CSS em vez disso, que já tem a propriedade gap, e ter apenas uma única linha. Melhor do que lidar com margens.

 9
Author: Ollie Williams, 2018-02-15 00:28:25

Usando a Flexbox na minha solução, usei a propriedade justify-content para o elemento-mãe (contentor) e indiquei as margens dentro da propriedade flex-basis dos itens. Assinale o excerto do código abaixo: 

.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>
 6
Author: iClusterDev, 2017-08-29 19:15:58
Com flexbox, criar calhas é uma dor, especialmente quando envolve embrulhos.

É necessário utilizar margens negativas (como indicado na pergunta.):

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

... ou alterar o HTML ( Como mostrado em outra resposta):

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

... ou outra coisa qualquer.

Em qualquer caso, você precisa de um hack feio para fazê-lo funcionar porque flexbox não fornece um recurso " flex-gap" ( pelo menos por agora ).

A questão das calhas, no entanto, é simples e fácil com o Layout de grade CSS.

A grelha spec fornece propriedades que criam espaço entre os itens da grelha, ignorando o espaço entre os itens e o contentor. Estas propriedades são:

  • grid-column-gap
  • grid-row-gap
  • grid-gap (a estenografia para ambas as propriedades acima)

Recentemente, o spec foi actualizado de modo a estar em conformidade com o Módulo de Alinhamento Da Caixa CSS, que fornece um conjunto de propriedades de alinhamento para usar em toda a caixa modelo. Então as propriedades são agora:

  • column-gap
  • row-gap
  • gap (abreviatura)

No entanto, nem todos os navegadores de suporte à rede suportam as propriedades mais recentes, por isso vou usar as versões originais na demonstração abaixo.

Também, se for necessário espaçamento entre os itens e o recipiente, padding no recipiente funciona muito bem (ver o terceiro exemplo na demonstração abaixo).

do spec:

10.1. Calhas: a row-gap, column-gap, e gap propriedades

As propriedades row-gap e column-gap (e a sua abreviatura gap), quando especificado num recipiente da grelha, definir as calhas entre a grelha linhas e colunas da grelha. A sua sintaxe está definida no alinhamento da caixa 3 do CSS §8 Diferenças Entre As Caixas .

O efeito destas propriedades é como se as linhas da grelha afectadas espessura adquirida: a pista de grade entre duas linhas de grade é o espaço entre a sarjetas que os representam.

.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>

Mais informações:

 6
Author: Michael Benjamin, 2018-02-12 21:55:25

Porque não fazer assim: 

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

Isto usa o selector de irmãos adjacente , para dar todos os elementos .item, excepto o primeiro a margin-left. Graças ao flexbox, isso mesmo resulta em elementos igualmente amplos. Isto também pode ser feito com elementos posicionados verticalmente e margin-top, é claro.

 5
Author: tillsanders, 2016-04-17 14:44:19
Eis a minha solução, que não requer aulas sobre os elementos infantis: 
.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

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

Utilização: 

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

A mesma técnica pode ser utilizada para as linhas e Colunas normais de flexão, para além do exemplo apresentado acima, e estendida com classes para espaçamento que não 4px.

 5
Author: MK10, 2017-01-19 14:24:31

Uso frequentemente o operador + nestes 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>
 5
Author: wutzebaer, 2018-05-25 20:10:15

Acho que a maneira mais fácil de fazer isto é com percentagens e apenas permitindo que a margem se compare com a sua largura

Isto significa que você acaba com algo como isto se você onde usando o seu exemplo 

#box {
   display: flex;
}

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

Significa que os teus valores são baseados na largura, mas que pode não ser bom para todos.

 4
Author: lukefrake, 2014-08-11 11:09:49

Aqui está uma grelha de elementos UI de cartão com espaçamento completo usando a caixa flexível:

enter image description here

Senti-me frustrado com o espaçamento manual das cartas, manipulando os estofos e as margens com resultados duvidosos. Então aqui estão as combinações de atributos CSS que achei muito eficazes: 

.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 isto ajude as pessoas, o presente e o futuro.
 3
Author: buildpax, 2017-08-03 06:52:15
Columnify-uma classe A solo para N colunas

Flexbox e SCSS 

.columnify {
  display: flex;

  > * {
    flex: 1;

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

Flexbox e 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>

Joga com ele emJSFiddle .

 3
Author: zurfyx, 2017-11-10 10:08:48

Podias usar a nova propriedade gap. Copio a explicação que encontrei neste artigo , assim como mais informações

A disposição da grelha de CSS tem um intervalo (anteriormente o intervalo da grelha) há algum tempo. Ao especificar o espaçamento interno de um elemento contendo ao invés do espaçamento em torno de elementos filhos, o gap resolve muitos problemas de layout comuns. Por exemplo, com o gap, você não tem que se preocupar com margens em elementos filhos causando espaços em branco indesejados ao redor das bordas de um que contém o elemento:

Infelizmente, neste momento, só o FireFox suporta lacunas nos esquemas de flexão. 

@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>
 3
Author: Andres Paul, 2020-01-07 11:45:05 

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
 1
Author: Amo Wu, 2017-02-16 03:35:20

Basta usar .item + .item no selector para corresponder a partir do 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>
 1
Author: Andrew Luca, 2018-01-11 22:37:42
Encontrei um hacker porque preciso mesmo disto. 

/* 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>
Aqui está uma grelha post-grid com boas categorias de crescimento flex também. Acho que ias gostar. Ver Codepeno
 1
Author: Keviin Cosmos, 2018-04-12 07:02:51

Assumindo:

  • você quer 4 colunas com a disposição da grelha com a embalagem
  • o número de itens não é necessariamente um múltiplo de 4

Definir uma margem esquerda em cada item, excepto 1.º, 5. º, 9. º item e assim por diante; e definir uma largura fixa em cada item. Se a margem esquerda for 10px, cada linha terá uma margem de 30px entre 4 itens, a largura percentual do item pode ser calculada do seguinte modo: 

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4
Trata-se de um trabalho digno para questões que envolvem a ú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>
 1
Author: Salman A, 2018-07-30 15:10:22
Há, de facto, uma boa, arrumada, única maneira de fazer isto (para que se possa considerar "melhor").

De todas as respostas postadas aqui, eu só encontrei uma que usa o calc () com sucesso (por Dariusz Sikorski). Mas quando posado com: "mas falha se há apenas 2 itens na última linha" não houve solução expandida.

Esta solução aborda a questão do PO com uma alternativa às margens negativas e aborda o problema colocado à Dariusz.

Notas:

  • Este exemplo só demonstra uma disposição de 3 colunas
  • ele usa {[[2] } para deixar o navegador fazer a matemática como ele quer -- 100%/3 (embora 33,3333% devam funcionar da mesma forma) , e (1em/3)*2 (embora .66
  • ele usa {[5] } para remar a última linha se houver menos elementos que as colunas 

.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>

Também em https://codepen.io/anon/pen/rqWagE

 1
Author: aequalsb, 2018-11-26 15:23:42

Não funcionará em todos os casos, mas se tiver larguras de crianças flexíveis ( % ) e conhecer o número de itens por linha, poderá especificar muito claramente as margens dos elementos necessários usando nth-child selector / S.

Depende em grande parte do que queres dizer com "melhor". Desta forma, não requer uma marcação adicional para elementos - filhos ou elementos negativos-mas ambas as coisas têm o seu 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>
 0
Author: jnmrobinson, 2016-03-09 03:53:04
Deparei-me com o mesmo problema antes, e deparei-me com a resposta para isto. Espero que ajude outros para futuras referências.

Resposta longa curta, adicione uma fronteira para o seu filho Flex-itens. em seguida, você pode especificar margens entre flex-itens para o que você gosta. No excerto, eu uso preto para fins de ilustração, você pode usar 'Transparente' se quiser.

#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>
 0
Author: Tunasing, 2016-12-08 07:20:55