To nie jest włamanie. Ta sama technika jest również używana przez bootstrap i jego siatkę, chociaż zamiast marginesu, bootstrap używa padding dla swoich cols.

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

Flexbox i css calc z obsługą wielu wierszy

Witam, poniżej znajduje się moje rozwiązanie robocze dla wszystkich przeglądarek obsługujących flexbox. Brak ujemnych marginesów.

Fiddle Demo

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

zwróć uwagę, że ten kod może być krótszy przy użyciu SASS

Aktualizacja 2020.II.11 Wyrównane kolumny w ostatnim wierszu po lewej

Aktualizacja 2020.II.14 Usunięto margin-bottom w ostatnim wierszu

Możesz użyć & > * + * jako selektora do emulacji flex-gap (dla pojedynczej linii):

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

Jeśli potrzebujesz wsparcia flex wrapping , możesz użyć elementu wrapper:

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

Możesz użyć przezroczystych obramowań.

Rozważałem ten problem, próbując zbudować model siatki flex, który może zastąpić model tables + table-cell dla starszych przeglądarek. A obramowania do rynien kolumnowych wydawały mi się najlepszym wyborem. czyli komórki tabeli nie mają marginesów.

Np.

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

Zwróć również uwagę, że potrzebujesz min-width: 50px; do flexbox. Model flex nie poradzi sobie ze stałymi rozmiarami, chyba że zrobisz flex: none; na konkretnym elemencie potomnym, który chcesz jako stały i w związku z tym wyłączone z bycia "flexi". http://jsfiddle.net/GLpUp/4 / Ale wszystkie kolumny razem z flex:none; nie są już modelem flex. Oto coś bliższego modelowi flex: http://jsfiddle.net/GLpUp/5/

Więc możesz normalnie używać marginesów, jeśli nie potrzebujesz zastępczej komórki tabeli dla starszych przeglądarek. http://jsfiddle.net/GLpUp/3/

Ustawienie background-clip: padding-box; będzie konieczne przy użyciu tła, ponieważ w przeciwnym razie tło wpłynie do przezroczysty obszar graniczny.

To rozwiązanie będzie działać dla wszystkich przypadków, nawet jeśli istnieje wiele wierszy lub dowolna liczba elementów. Ale liczba sekcji powinna być taka sama, chcesz 4 w pierwszym rzędzie, a 3 to drugi rząd to nie będzie działać w ten sposób przestrzeń dla 4-tej zawartości będzie pusta kontener nie wypełni.

Używamy display: grid; i jego właściwości.

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

minusem tej metody jest w Mobile Opera Mini will nie być obsługiwane i w PC działa to tylko po IE10 .

Uwaga Aby uzyskać pełną kompatybilność przeglądarki, w tym IE11, użyj Autoprefixer

STARA ODPOWIEDŹ

Nie myśl o tym jak o starym rozwiązaniu, nadal jest jednym z najlepszych, jeśli chcesz tylko jeden wiersz elementów i będzie działać ze wszystkimi przeglądarkami.

Ta metoda jest używana przez kombinacja CSS, więc można nim manipulować wiele inne sposoby również, ale jeśli Twoja kombinacja jest zła, może to również powodować problemy.

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

Poniższy kod załatwi sprawę. W tej metodzie nie ma potrzeby podawania margin: 0 -5px; na #box opakowanie.

Próbka robocza dla ciebie:

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

CSS gap właściwość:

JEST NOWY gap właściwość CSS dla układów wielokolumnowych, flexbox i grid, które działają teraz w niektórych przeglądarkach! (Zobacz Czy mogę użyć link 1; link 2 ). Jest skrótem od row-gap i 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>

CSS row-gap właściwość:

The row-gap właściwość CSS dla układów flexbox i grid pozwala na aby utworzyć lukę między wierszami. Myślę, że Safari jeszcze go nie obsługuje.

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

CSS column-gap właściwość:

The column-gap CSS property for multi-column, flexbox and grid layouts works pozwala na tworzenie odstępów między kolumnami. Myślę, że Safari jeszcze go nie obsługuje.

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

Powiedzmy, że jeśli chcesz ustawić 10px spację między elementami, możesz po prostu ustawić .item {margin-right:10px;} dla wszystkich i zresetować ją na ostatnim .item:last-child {margin-right:0;}

Możesz również użyć ogólnego selektora rodzeństwa ~ lub następnego + aby ustawić lewy margines na elementach z wyłączeniem pierwszego .item ~ .item {margin-left:10px;} lub użyć .item:not(:last-child) {margin-right: 10px;}

Flexbox jest tak sprytny, że automatycznie przelicza i równomiernie rozkłada siatkę.

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>

Jeśli chcesz zezwolić flex wrap, zobacz poniższy przykład.

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>

Znalazłem rozwiązanie, które opiera się na ogólnym selektorze rodzeństwa, ~ i pozwala na nieskończone zagnieżdżanie.

Zobacz ten kod pióro do pracy przykład

Zasadniczo, wewnątrz kontenerów kolumnowych, każde dziecko, które jest poprzedzone przez inne dziecko, otrzymuje górny margines. Podobnie, w kontenerze każdego wiersza każdy potomek, który jest poprzedzony innym, otrzymuje lewy margines.

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

Zgodnie z #ChromeDevSummit istnieje implementacja właściwości gapdla Flexbox w Firefox i przeglądarkach opartych na Chromium.

Oto Live Demo

Idąc dalej od odpowiedzi Sawy, oto nieco ulepszona wersja, która pozwala ustawić stały odstęp między przedmiotami bez otaczającego marginesu.

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

Dołączona jest również wersja 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>

A flex container z -x (ujemny) margines i flex items z x (dodatni) margines lub padding oba prowadzą do pożądanego efektu wizualnego: elementy Flex mają stałą lukę 2x tylko pomiędzy siebie nawzajem.

Wydaje się, że jest to po prostu kwestia preferencji, czy używać marginesu czy paddingu na elementach flex.

W tym przykładzie elementy flex są skalowane dynamicznie w celu zachowania stałej Luka:

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

Użyłem tego do kolumn owiniętych i o stałej szerokości. Kluczem jest calc()

Próbka 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});}

}

Full Codepen sample

Ostatecznie dodają Właściwość gap do flexbox. Do tego czasu możesz używać CSS grid, który ma już Właściwość gap i ma tylko jeden wiersz. Ładniej niż z marżami.

Używając Flexbox w moim rozwiązaniu użyłem właściwości justify-content dla elementu nadrzędnego (kontenera) i określiłem marginesy wewnątrz właściwości flex-basis elementów. Sprawdź poniższy fragment kodu:

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

[18]}w przypadku flexbox tworzenie rynien jest uciążliwe, szczególnie w przypadku owijania.

Musisz użyć ujemnych marginesów (, Jak pokazano w pytaniu):

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

... lub zmienić HTML ( Jak pokazano w innej odpowiedzi):

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

... albo coś innego.

W każdym razie potrzebujesz brzydkiego hacka, aby to działało, ponieważ flexbox nie zapewnia funkcji " flex-gap ( przynajmniej na razie).

Specyfikacja siatki zapewnia właściwości, które tworzą przestrzeń między elementami siatki, ignorując przestrzeń między elementami a kontenerem. Te właściwości to:

• grid-column-gap
• grid-row-gap
• grid-gap (skrót dla obu powyższych właściwości)

Ostatnio specyfikacja została zaktualizowana, aby była zgodna z CSS Box Alignment Module , który zapewnia zestaw właściwości wyrównania do użytku we wszystkich modelach pudełkowych. Więc właściwości są teraz:

• column-gap
• row-gap
• gap (Skrót)

Jednak nie wszystkie przeglądarki obsługujące siatkę obsługują nowsze właściwości, więc użyję oryginalnych wersji w demie poniżej.

Ponadto, jeśli potrzebne są odstępy między elementami a kontenerem, padding na kontenerze działa dobrze(zobacz trzeci przykład w demie poniżej).

od spec:

10.1. Rynny: na row-gap, column-gap, oraz gap właściwości

The row-gap and column-gap properties (and their gap shorthand), po określeniu na pojemniku kratowym zdefiniuj rynny między kratą wiersze i kolumny siatki. Ich składnia jest zdefiniowana w CSS Box Alignment 3 §8 Luki Między Polami .

Efekt tych właściwości jest tak, jakby dotknięte linie siatki uzyskana grubość: ścieżka siatki między dwoma liniami siatki jest przestrzenią między rynnami, które reprezentuj ich.

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

Więcej informacji:

• wsparcie przeglądarki dla CSS Grid
• Ułatw definiowanie marginesów, które mają zastosowanie tylko między elementami flex (dyskusja)
• odstęp między elementami flexbox

Dlaczego nie zrobić tego w ten sposób:

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

Używasąsiedniego selektora rodzeństwa , aby dać wszystkie .item elementy, z wyjątkiem pierwszego a margin-left. Dzięki flexbox daje to nawet równie szerokie elementy. Można to również zrobić z elementami umieszczonymi pionowo i margin-top, Oczywiście.

Oto moje rozwiązanie, które nie wymaga ustawiania żadnych klas na elementach potomnych:

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

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

Użycie:

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

Ta sama technika może być użyta dla zwykłych wierszy i kolumn flex, oprócz przykładu inline podanego powyżej, i rozszerzona o klasy dla odstępów innych niż 4px.

Często używam operatora + w takich przypadkach

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

Uważam, że najłatwiej to zrobić z procentami i po prostu pozwalając marginesowi na podliczenie Twojej szerokości

Oznacza to, że skończysz z czymś takim, jeśli gdzie używając swojego przykładu

#box {
   display: flex;
}

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

Oznacza, że twoje wartości są oparte na szerokości, co może nie być dobre dla wszystkich.

Oto siatka elementów interfejsu karty z odstępami zakończonymi za pomocą elastycznego pudełka:

Byłem sfrustrowany ręcznym rozstawieniem kart poprzez manipulowanie wyściółkami i marginesami z niepewnymi wynikami. Oto kombinacje atrybutów CSS, które uznałem za bardzo skuteczne:

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

Columnify - Klasa solo dla N kolumn

Flexbox i SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

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

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

Zagraj z nim na JSFiddle.

Możesz użyć nowej właściwości gap. Kopiuję wklejam Wyjaśnienie, które znalazłem w tym Artykuł , a także więcej informacji

CSS grid layout ma lukę (wcześniej grid-gap) od pewnego czasu. Określając wewnętrzne odstępy elementu zawierającego, a nie odstępy wokół elementów potomnych, gap rozwiązuje wiele typowych problemów z układem. Na przykład w przypadku gap nie musisz się martwić o marginesy na elementach potomnych powodujące niechciane spacje na krawędziach zawierający element:

Niestety w tej chwili tylko FireFox obsługuje luki w układach flex.

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

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

Po prostu użyj .item + .item w selektorze, aby dopasować od drugiej .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>

Znalazłem włamanie, ponieważ naprawdę potrzebuję tego samego.

/* 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>

Oto siatka postów z ładnymi kategoriami Flex grow. Myślę, że ci się spodoba. Zobacz Codepen

Zakładając:

• chcesz 4-kolumnowy układ siatki z zawijaniem
• liczba elementów niekoniecznie jest wielokrotnością 4

Ustaw lewy margines na każdym elemencie z wyjątkiem 1., 5., 9. i tak dalej; i ustaw stałą szerokość na każdym elemencie. Jeśli lewy margines wynosi 10px, to każdy wiersz będzie miał 30px marginesu między 4 elementami, procentową Szerokość elementu można obliczyć w następujący sposób:

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

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

Istnieje naprawdę ładny, schludny, CSS-jedyny sposób, aby to zrobić (który można uznać za "lepszy").

Ze wszystkich zamieszczonych tutaj odpowiedzi znalazłem tylko jedną, która z powodzeniem wykorzystuje calc () (autor: Dariusz Sikorski). Ale po ułożeniu z: "ale to nie powiedzie się, jeśli w ostatnim wierszu są tylko 2 elementy" nie było rozwinięcia rozwiązania.

To rozwiązanie rozwiązuje kwestię OP z alternatywą dla marginesów ujemnych i rozwiązuje problem postawiony Dariuszowi.

Uwagi:

• to przykład pokazuje tylko układ 3-kolumnowy
• używa calc(), aby pozwolić przeglądarce wykonywać obliczenia tak, jak chce -- 100%/3 (chociaż 33.3333% powinno działać równie dobrze) , a (1em/3)*2 (chociaż .66em powinien również działać dobrze) .
• używa ::after do wstawiania ostatniego wiersza, jeśli jest mniej elementów niż kolumny

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

Również w https://codepen.io/anon/pen/rqWagE

To nie będzie działać w każdym przypadku, ale jeśli masz elastyczne szerokości potomka ( % ) i znasz liczbę elementów w wierszu, możesz bardzo łatwo określić marginesy niezbędnych elementów za pomocą selektora/selektorów nth-child.

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>

Natknąłem się na ten sam problem wcześniej, potem natknąłem się na odpowiedź na to. Mam nadzieję, że pomoże innym w przyszłości.

Długa odpowiedź krótka, dodaj obramowanie do dziecięcych elementów flex. następnie możesz określić marginesy między elementami flex do dowolnych ustawień. W fragmencie używam czarnego do celów ilustracyjnych, możesz użyć "przezroczystego", jeśli chcesz.

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