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

时间:2023-03-09 18:47:58
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端用的,哈哈!