<div style="width: 100%;">
  <!-- space-between -->
  <div style="padding: 24px;">
    <div style="text-align:center; padding: 0 0 12px;">
      <span style="color: #718096">justify-content:</span> space-between
    </div>
    <div style="display: flex; justify-content: space-between; background-color: #EDF2F7; padding: 8px;">
      <div style="width: 32px; height: 32px; background-color: #A0AEC0;  margin: 0 2px;"></div>
      <div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
      <div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
    </div>
  </div>
  <!-- space-around -->
  <div style="padding: 24px;">
    <div style="text-align:center; padding: 0 0 12px;">
      <span style="color: #718096">justify-content:</span> space-around
    </div>
    <div style="display: flex; justify-content: space-around; background-color: #EDF2F7; padding: 8px;">
      <div style="width: 32px; height: 32px; background-color: #A0AEC0;  margin: 0 2px;"></div>
      <div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
      <div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
    </div>
  </div>
  <!-- space-evenly -->
  <div style="padding: 24px;">
    <div style="text-align:center; padding: 0 0 12px;">
      <span style="color: #718096">justify-content:</span> space-evenly
    </div>
    <div style="display: flex; justify-content: space-evenly; background-color: #EDF2F7; padding: 8px;">
      <div style="width: 32px; height: 32px; background-color: #A0AEC0;  margin: 0 2px;"></div>
      <div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
      <div style="width: 32px; height: 32px; background-color: #A0AEC0; margin: 0 2px;"></div>
    </div>
  </div>
</div>
body {
  display: flex;
  height: 100vh;
  margin: 0;
  align-items: center;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div {
/*   padding: 12px; */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.