CSS flex让所有灵活的项目都带有相同的长度，忽略它们的内容：

.flexbox {
    display:  -webkit-box;
    display:  -webkit-flex;
    display:  -ms-flexbox;
    display:  flex;
    -webkit-box-pack:  center;
    -moz-box-pack:  center;
    -ms-flex-align:  center;
    -webkit-box-align:  center;
    -moz-box-align:  center;
    -webkit-align-items:  center;
    -moz-align-items:  center;
    align-items:  center;
}
.flex-1 {
    webkit-box-flex:  1;
    -webkit-flex:  1;
    -ms-flex:  1;
    flex:  1;
}

<ul class="proimg mt10 flexbox">

                     < li  class ="flex-1" >
                         < a  href ="http://m.instrument.com.cn/show/d-C10414.html" >
                             < img  src ="http://img1.17img.cn/17img/images/201510/pic/67863e21-dd1c-4087-b8e0-137883e6e130.jpg!w186x152.jpg" >
                             < span  class ="f10 bgbl white" >GC-4000A系列气相色谱仪 </ span >
                         </ a >
                     </ li >
                     < li  class ="flex-1" >
                         < a  href ="http://m.instrument.com.cn/show/d-C126972.html" >
                             < img  src ="http://img1.17img.cn/17img/old/showb/pic/C126972.jpg!w186x152.jpg" >
                             < span  class ="f10 bgbl white" >高纯气体分析系统GC-9560-PDD </ span >
                         </ a >
                     </ li >
                     < li  class ="flex-1" >
                         < a  href ="http://m.instrument.com.cn/show/d-C149111.html" >
                             < img  src ="http://img1.17img.cn/17img/old/showb/pic/C149111.jpg!w186x152.jpg" >
                             < span  class ="f10 bgbl white" >赛默飞TRACE 1300系列 模块化气相色谱仪 </ span >
                         </ a >
                     </ li >
             </ ul >

效果如下图： 

参考网站：

http://www.runoob.com/cssref/css3-pr-flex.html 

http://m.liepin.com/ 

注意：存在兼容性问题，safari不支持。pc端慎用。我是在wap端用的，哈哈！ 

转载于:https://www.cnblogs.com/nzcblog/p/4952367.html