flexbox 5 elements over two rows code example

Example 1: how to put two items befside each other using flexbox

.flex-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.column-item:nth-of-type(-n + 3) {
  grid-column: span 2;
}

.column-item {
  background-color: lightgreen;
}

Example 2: how to put two items befside each other using flexbox

<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>

Tags:

Misc Example