<div class="flex-rows">
  <div class="flex-item">
    <span>content 01</span>
  </div>
  <div class="flex-item">
    <span>content 01</span>
  </div>
  <div class="flex-item">
    <span>content 01</span>
  </div>
  <div class="flex-item">
    <span>content 01</span>
  </div>
</div>
.flex-rows{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
}
.flex-item{
  margin-right: 2.5%;
  width: 31.666%;
  text-align: center;
  border:1px solid #ccc;
  box-sizing:border-box;
  height: 150px;
  border-radius:20px;
  position:relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content:center;
}
.flex-item span{
  display:block;
}
.flex-item:nth-child(3n){
  margin-right: 0;
}
.flex-item:last-child{
  margin-right: 0;
  margin-top: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.