CSS flex让所有灵活的项目都带有相同的长度,忽略它们的内容:
2015-11-10 11:33
681 查看
.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端用的,哈哈!
相关文章推荐
- 学习css3的弹性盒模型
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
- CSS3阴影 box-shadow的使用和技巧总结[转]
- css 制作三角形
- css 制作三角形/平行四边形
- css图像映射
- js实现css、addClass、removeClass和toggleClass
- Html11.09CSS层叠样式表内容整理
- CSS选择器
- 纯 CSS 创建各种不同的图形形状
- CSS动态选中效果
- CSS的4种引入方式及优先级
- css布局 : 居中问题
- 8.1.3 CSS3选择器 —— 伪类
- 8.1.2 CSS3选择器 —— 结构性伪类
- css:outline
- gulp教程之gulp-minify-css
- css/js(工作中遇到的问题)-2
- i、span不显示图片,设置宽高不显示
- html中如何显示代码样式方法