京东秒杀区

 <div class="ms">
       <div class="msbt">
          <div>京东秒杀</div>
          <div class="msdjs">00:00:31</div>
          <div><a href="">更多秒杀</a></div>
       </div>
       <div>
         <ul  class="mssp">
            <li>
            <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
            <div class="iconfont icon-rmb">79</div>
            <div class="iconfont icon-rmb">179</div>
          </li>
          <li>
            <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
            <div class="iconfont icon-rmb">79</div>
            <div class="iconfont icon-rmb">179</div>
          </li>
          <li>
            <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
            <div class="iconfont icon-rmb">79</div>
            <div class="iconfont icon-rmb">179</div>
          </li>
          <li>
            <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
            <div class="iconfont icon-rmb">79</div>
            <div class="iconfont icon-rmb">179</div>
          </li>
          <li>
            <a href=""><img src="static/images/ms/ms-5.jpg" alt=""></a>
            <div class="iconfont icon-rmb">79</div>
            <div class="iconfont icon-rmb">179</div>
          </li>
          <li>
            <a href=""><img src="static/images/ms/ms-6.jpg" alt=""></a>
            <div class="iconfont icon-rmb">79</div>
            <div class="iconfont icon-rmb">179</div>
          </li>
         </ul>
        </div>
     </div>

CSS 样式表

 .main .ms {
   border-radius: 1rem;
   background-color: #fff;
   margin-bottom: 2rem;
  width: 85%;
  flex-flow: nowrap;
}
.main .ms .msbt {
    display: flex;
    align-items: center;
}
.main .ms .msbt :first-of-type{
     flex-basis: 30%; 
     flex: 1;
    flex: auto;
    font-size: 2rem;
    padding-left: 3rem;
}
.main .ms .msbt .msdjs {
    flex: auto;
    flex: 8;
}
.main .ms .msbt :last-of-type {
    flex: 1 ;
    color: red  ;
    flex: auto;
}
/* 秒杀商品 */
 .main .ms .mssp {
   flex: auto;
    display: flex;
    justify-content: space-between; 
    flex-flow: nowrap;
}
.main .ms .mssp li {
    display: flex;
    flex-flow: column;
    align-items: center;
    flex: auto;
} 
.main .ms .mssp img {
    width: 100%;
    height: 100%;
}