<ul class="flex-margin">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
/* ul li reset,decoration */
*{
  margin:0;
  padding:0;
}
ul li{
  list-style:none;
}
ul{
  width:250px;
  margin:0 auto;
}
/* flex-margin */
.flex-margin{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  background:#d2eafc;
}
.flex-margin li{
  margin:10px 20px;
  padding:20px;
  background:#ccc;
  border-radius:4px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.