Aby ustawić minimalną odległość między elementami schematu flexbox używam margin: 0 5pxna .itemi margin: 0 -5pxna pojemniku. Dla mnie to wygląda na hack, ale nie mogę znaleźć lepszego sposobu na zrobienie tego.

Przykład

#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 nie ma zawijanych marginesów.
• Flexbox nie ma nic podobnego do border-spacingtabel (z wyjątkiem właściwości CSS, gapktóra nie jest dobrze obsługiwana w większości przeglądarek, caniuse )

Dlatego osiągnięcie tego, o co prosisz, jest nieco trudniejsze.

Z mojego doświadczenia wynika, że ​​„najczystszym” sposobem, który nie używa :first-child/ :last-childi działa bez żadnych modyfikacji, flex-wrap:wrapjest ustawienie padding:5pxkontenera i margin:5pxdzieci. To stworzy 10pxlukę między każdym dzieckiem a między każdym dzieckiem a ich rodzicem.

Próbny

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

To nie jest hack. Ta sama technika jest również używana przez bootstrap i jego siatkę, jednak zamiast marginesu, bootstrap używa wypełnienia dla swoich cols.

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

Flexbox i css calc z obsługą wielu rzędów

Witaj, poniżej jest moje działające rozwiązanie dla wszystkich przeglądarek obsługujących Flexbox. Brak ujemnych marż.

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>

Uwaga: ten kod może być krótszy przy użyciu SASS

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

Aktualizacja 2020.II.14 Usunięto margines na dole w ostatnim wierszu

Możesz użyć przezroczystych ramek.

Rozważałem ten problem, starając się zbudować model elastycznej siatki, który może wrócić do modelu tabeli + komórki-komórki dla starszych przeglądarek. A granice dla rynien kolumnowych wydawały mi się najlepszym wyborem. tzn. komórki tabeli nie mają marginesów.

na przykład

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

Pamiętaj też, że potrzebujesz min-width: 50px;Flexboksa. Model flex nie będzie obsługiwał stałych rozmiarów, chyba że wykonasz flex: none;określony element podrzędny, który chcesz ustawić jako stały, a zatem nie będzie on istniał "flexi". http://jsfiddle.net/GLpUp/4/ Ale wszystkie kolumny razem z nimi flex:none;nie są już modelem elastycznym. Oto coś bliższego modelowi flex: http://jsfiddle.net/GLpUp/5/

Tak więc możesz właściwie używać marginesów normalnie, jeśli nie potrzebujesz rezerwowania komórek tabeli w starszych przeglądarkach. http://jsfiddle.net/GLpUp/3/

Ustawienie background-clip: padding-box;będzie konieczne podczas korzystania z tła, ponieważ w przeciwnym razie tło przepłynie do przezroczystego obszaru obramowania.

To rozwiązanie będzie działać we wszystkich przypadkach, nawet jeśli jest wiele wierszy lub dowolna liczba elementów. Ale liczba sekcji powinna być taka sama, jak chcesz 4 w pierwszym rzędzie, a 3 to drugi rząd, to nie będzie działać w ten sposób, że miejsce na 4. zawartość będzie puste, pojemnik nie będzie wypełniony.

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 to, że w Mobile Opera Mini nie będzie obsługiwana, a na PC działa to tylko po IE10 .

Uwaga: aby uzyskać pełną zgodność przeglądarki, w tym IE11, użyj Autoprefixera

STARA ODPOWIEDŹ

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

Ta metoda jest używana przez kombinację rodzeństwa CSS , więc możesz nią manipulować również na wiele innych sposobów, ale jeśli twoja kombinacja jest zła, może również powodować problemy.

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

Poniższy kod załatwi sprawę. W tej metodzie nie ma potrzeby, aby dać margin: 0 -5px;do #boxowinięcia.

Działająca próbka 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>

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 obsługi elastycznego owijania , możesz użyć elementu opakowania:

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

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

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

Flexbox jest tak sprytny, że automatycznie przelicza i równo rozprowadza 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ć na owijanie flex , zobacz następujący 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 oparte na ogólnym selektorze rodzeństwa ~i umożliwiające nieskończone zagnieżdżanie.

Zobacz ten kodowy długopis jako działający przykład

Zasadniczo w kontenerach kolumnowych każde dziecko poprzedzone innym dzieckiem otrzymuje górny margines. Podobnie, w każdym kontenerze wiersza każde dziecko poprzedzone 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>

Przechodząc 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>

Według #ChromDevSummit istnieje implementacja gapwłaściwości Flexboksa, chociaż w tej chwili (14 listopada 2019 r.) Jest ona obsługiwana tylko w Firefoksie, ale wkrótce powinna zostać zaimplementowana w Chrome:

Demo na żywo

Zaktualizuję swoją odpowiedź, gdy tylko przejdzie do Chrome.

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

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

}

Pełna próbka Codepen

Elastyczny pojemnik z -x (ujemna) margines i giętkie elementy z x (liczba dodatnia) marginesu lub impregnowanie zarówno prowadzić do żądanego efektu końcowego: elementy Flex ma ustaloną wielkość szczeliny 2X jedynie między sobą.

Wydaje się, że jest to po prostu kwestia preferencji, czy użyć marginesu czy wypełnienia na elementach elastycznych.

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

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

W końcu dodadzą gapwłaściwość do Flexbox. Do tego czasu możesz użyć siatki CSS, która ma już gapwłaściwość i mieć tylko jeden wiersz. Ładniejsze niż zajmowanie się marżami.

gapWłaściwość CSS :

Dodano nową gapwłaściwość CSS dla układów wielokolumnowych, flexbox i układów siatki, która działa teraz w niektórych przeglądarkach! (Zobacz Czy mogę użyć linku 1 ; link 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>

W chwili pisania to działa tylko w Firefoksie. Obecnie działa w Chrome, jeśli włączysz „Włącz eksperymentalne funkcje platformy internetowej” about:flags.

Korzystając z Flexboksa w moim rozwiązaniu, użyłem justify-contentwłaściwości elementu nadrzędnego (kontenera) i określiłem marginesy wewnątrz flex-basiswłaściwości elementów. Sprawdź fragment kodu poniżej:

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

Dzięki Flexbox tworzenie rynien jest uciążliwe, szczególnie gdy chodzi o owijanie.

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

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

... lub zmień 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 działał, ponieważ Flexbox nie zapewnia funkcji „ flex-gap” ( przynajmniej na razie ).

Problem z rynnami jest jednak prosty i łatwy dzięki CSS Grid Layout.

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 nieruchomości powyżej)

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łek. Więc właściwości są teraz:

• column-gap
• row-gap
• gap (stenografia)

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

Ponadto, jeśli potrzebny jest odstęp między przedmiotami a pojemnikiem, paddingna pojemniku działa dobrze (patrz trzeci przykład w pokazie poniżej).

Ze specyfikacji:

10.1 Rynny: te row-gap, column-gaporaz gap ogłoszenia

Właściwości row-gapi column-gap(oraz ich gapskróty), gdy są określone w kontenerze siatki, definiują rynny między rzędami siatki i kolumnami siatki. Ich składnia jest zdefiniowana w CSS Box Alignment 3 §8 Gaps Between Boxes .

Efekt tych właściwości jest taki, jakby grubość uzyskanych linii siatki: grubość linii między dwiema liniami siatki była przestrzenią między rynnami, które je reprezentują.

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

• Obsługa przeglądarki CSS Grid
• Ułatw definiowanie marginesów, które mają zastosowanie tylko między elementami elastycznymi (dyskusja)
• Odstępy między elementami Flexbox

Dlaczego nie zrobić tego w ten sposób:

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

Używa sąsiedniego selektora rodzeństwa , aby dać wszystkie .itemelementy, z wyjątkiem pierwszego a margin-left. Dzięki Flexbox uzyskuje się nawet równie szerokie elementy. Można to również zrobić z elementami ustawionymi pionowo i margin-topoczywiś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;
}

Stosowanie:

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

Tę samą technikę można zastosować do normalnych elastycznych wierszy i kolumn oprócz przykładu śródliniowego podanego powyżej i rozszerzyć o klasy dla odstępów innych niż 4px.

W takich przypadkach często używam operatora +

#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ć za pomocą wartości procentowych i po prostu pozwalając marginesowi na wyrównanie szerokości

Oznacza to, że skończysz z czymś takim, jeśli korzystasz z przykładu

#box {
   display: flex;
}

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

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

Oto siatka elementów interfejsu użytkownika karty z odstępami wypełnionymi za pomocą elastycznego pudełka:

Byłem sfrustrowany ręcznym rozmieszczaniem kart przez manipulowanie marginesami i marginesami z niepewnymi wynikami. Oto kombinacje atrybutów CSS, które uważam 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>

Mam nadzieję, że to pomaga ludziom, teraźniejszości i przyszłości.

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>

Graj z nim na JSFiddle .

Wystarczy użyć .item + .itemselektora, aby dopasować od sekundy.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>

Zarozumiały:

• Chcesz 4-kolumnowy układ siatki z zawijaniem
• Liczba przedmiotó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ść dla każdego elementu. Jeśli lewy margines wynosi 10 pikseli, wówczas każdy wiersz będzie miał margines 30 pikseli 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

Jest to przyzwoite obejście problemów dotyczących ostatniego rzędu Flexboksa.

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

Jest naprawdę przyjemny, schludny, tylko CSS sposób na zrobienie tego (można to uznać za „lepsze”).

Ze wszystkich zamieszczonych tutaj odpowiedzi znalazłem tylko taką, która z powodzeniem korzysta z funkcji calc () (autor: Dariusz Sikorski). Ale gdy postawiono na: „ale to się nie powiedzie, jeśli w ostatnim rzędzie są tylko 2 elementy”, żadne rozwiązanie nie zostało rozwinięte.

To rozwiązanie odpowiada na pytanie PO jako alternatywy dla ujemnych marż i rozwiązuje problem postawiony Dariuszowi.

uwagi:

• Ten przykład pokazuje tylko 3-kolumnowy układ
• Używa, calc()aby pozwolić przeglądarce na matematykę tak, jak chce - 100%/3 (chociaż 33,3333% powinno równie dobrze działać) i (1em/3)*2 (chociaż .66em powinien również działać dobrze) .
• Służy ::afterdo wypełniania ostatniego wiersza, jeśli jest mniej elementów niż kolumn

.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ż na https://codepen.io/anon/pen/rqWagE

Możesz skorzystać z nowej właściwości gap. Kopiuję, wklejam wyjaśnienie, które znalazłem w tym artykule , a także więcej informacji

W układzie siatki CSS występował odstęp (wcześniej odstęp). Poprzez określenie wewnętrznego odstępu elementu zawierającego zamiast odstępu wokół elementów potomnych, odstęp rozwiązuje wiele typowych problemów z układem. Na przykład w przypadku odstępu nie musisz martwić się o marginesy na elementach potomnych, które powodują niepożądane spacje wokół krawędzi elementu zawierającego:

Niestety obecnie tylko FireFox obsługuje luki w układach elastycznych.

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

Nie będzie to działać w każdym przypadku, ale jeśli masz elastyczne szerokości potomne (%) i znasz liczbę elementów w rzędzie, możesz bardzo dokładnie określić marginesy niezbędnych elementów, używając nth-child selektora / ów.

Zależy to w dużej mierze od tego, co rozumiesz przez „lepszy”. W ten sposób nie wymaga dodatkowego znacznika opakowania dla elementów potomnych lub elementów ujemnych - ale oba te elementy mają swoje miejsce.

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>

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

długa odpowiedź krótka, dodaj ramkę do elementów elastycznych dziecka. następnie możesz określić marginesy między elementami elastycznymi do tego, co chcesz. We 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>

Sztuczka z ujemnym marginesem na kontenerze pudełkowym działa po prostu świetnie. Oto kolejny przykład świetnie działający z zamówieniem, pakowaniem i co nie.

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}

<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>