Flexbox Gap vs Flexbox Margin Layout

index.html

<section class="section">
  <h2>Flexbox with gap!</h2>

  <!-- Start flexbox layout -->
  <div class="flex flex-gap">
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>
    <div class="item content">Even Longer Item</div>
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>
    <div class="item content">Even Longer Item</div>
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>
    <div class="item content">Even Longer Item</div>
    <div class="item content">Item</div>
    <div class="item content">Longer Item</div>
    <div class="item content">Even Longer Item</div>
  </div>
  <!-- / End flexbox layout -->
</section>

<section class="section">
  <h2>Flexbox with margin!</h2>

  <!-- Start flexbox layout -->
  <div class="flex flex-margins">
    <div class="item">
      <div class="content">Item</div>
    </div>
    <div class="item">
      <div class="content">Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Even Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Item</div>
    </div>
    <div class="item">
      <div class="content">Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Even Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Item</div>
    </div>
    <div class="item">
      <div class="content">Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Even Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Item</div>
    </div>
    <div class="item">
      <div class="content">Longer Item</div>
    </div>
    <div class="item">
      <div class="content">Even Longer Item</div>
    </div>
  </div>
  <!-- / End flexbox layout -->
</section>

style.css

:root {
  --gap: 1rem;
}

/*
 * Base flex container styles
 */
.flex {
  display: flex;
  flex-wrap: wrap;
}

/*
 * Flexbox gap layout
 */
.flex-gap {
  gap: var(--gap);
}

.flex-gap .item {
  padding: var(--gap);
}

/*
 * Flexbox negative margin layout
 */

.flex-margins .item {
  margin-top: var(--gap);
  margin-left: var(--gap);
}

.flex-margins .content {
  padding: var(--gap);
}

/* =========================== */
/* Other styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  padding: calc(var(--gap) * 2);
  font-family: sans-serif;
  border: 16px ridge #ff6550;
}

.item {
  color: white;
  background-color: tomato;
}

.section {
  margin: 40px auto;
  width: 100%;
  max-width: 800px;
  background: #ffe7e7;
}

h2 {
  padding: var(--gap) 0;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}