flex

new spec of flex

HTML

<div class="flexbox">
    <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
      <h6><a href="http://www.baidu.com">这里是标题</a></h6>
    </div>
  <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
      <h6><a href="http://www.baidu.com">这里是标题</a></h6>
    </div>
   <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
      <h6><a href="http://www.baidu.com">这里是标题</a></h6>
    </div>
  <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
      <h6><a href="http://www.baidu.com">这里是标题</a></h6>
    </div>
</div>

<div class="flexbox">
    <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
    </div>
   <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
    </div>
    <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
    </div>
    <div class="item">
      <img src="https://mc.qcloudimg.com/static/img/3b61e7e0e43a71df251b799180ee4234/CVM.svg" />
    </div>
</div>

CSS

.flexbox {
  display:flex;
}
.flexbox .item {
  flex:1
}
.flexbox .item img{
  display:block;
  width:100%;
}
.flexbox .item h6 {
    font-size:18px;
    text-align: center;
}