flex等间距布局方式2

by wu huan

HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.container {
   display: flex;
   width: 100%;
   background: #31f9b3;
 }

 .item {
   flex: 0 0 80px;
   width: 80px;
   height: 80px;
   margin-left: calc((100% - 240px)/4);
   background: #fff;
   border-radius: 40px;
 }