<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.