Using margin on flex items

There are multiple ways to do this:

• Use calc:

  .flex-item {
    width: calc(50% - 2em);
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    border: 1px solid blue;
    box-sizing: border-box;
    height: calc(160px - 2em);
    width: calc(50% - 2em);
    margin: 1em;
  }

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

• Use nested boxes:

  .flex-item {
    width: 50%;
    display: flex;
  }
  .flex-item > div {
    border: 1px solid blue;
    flex: 1;
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    height: 160px;
    width: 50%;
    display: flex;
  }
  .flex-item > div {
    border: 1px solid blue;
    flex: 1;
    margin: 1em;
  }

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

• Place each row in a nowrap container, and use a positive flex-shrink factor

  .row {
    display: flex;
  }
  .flex-item {
    width: 50%;
    margin: 1em;
  }
  

  .flex-container {
    border: 1px solid red;
    width: 320px;
  }
  .row {
    height: 160px;
    display: flex;
  }
  .flex-item {
    border: 1px solid blue;
    width: 50%;
    margin: 1em;
  }

  <div class="flex-container">
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    <div class="row">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
  </div>

• Don’t use width. Instead, force line-breaks at the right places, and use flex: 1 to make the elements grow to fill remaining space.

  .flex-item {
    flex: 1;
  }
  .line-break {
    width: 100%
  }
  

  .flex-container {
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
  }
  .flex-item {
    border: 1px solid blue;
    box-sizing: border-box;
    height: calc(160px - 2em);
    flex: 1;
    margin: 1em;
  }
  .line-break {
    width: 100%;
  }

  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="line-break"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="line-break"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>