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端用的,哈哈!
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端用的,哈哈!
CSS flex让所有灵活的项目都带有相同的长度,忽略它们的内容:的更多相关文章
- 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- CSS Flex
关于flex 请看这里 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 太详细啦!!! 还通俗易懂!!! 没啥好说的 不过上面那篇文 ...
- css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
- [Web 前端 ] 还在用浮动吗?CSS flex布局你了解多少?
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
- css Flex布局(一)
网页布局(layout) 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 6个属性 ...
- CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
- css flex弹性布局学习总结
一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
随机推荐
- 将 Web 应用性能提高十倍的10条建议
提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上 ...
- Mac OS X Shell 脚本和终端命令
系统 重启 Mac OS X: 1 shutdown - r now 关闭 Mac OS X: 1 shutdown now 电源管理/省电 获取当前电源管理设置的信息 1 pmset -g 设置显示 ...
- Wix - 教程
1. 不错的教程 http://www.merlinia.com/mdt/WiXTutorial4.msl 2.
- MarkWord - 可发布博客的 Markdown编辑器 代码开源
因为前一段时间看到 NetAnalyzer 在Windows10系统下UI表现惨不忍睹,所以利用一段时间为了学习一下WPF相关的内容,于是停停写写,用了WPF相关的技术,两个星期做了一个Markdow ...
- java jodd轻量级开发框架
http://git.oschina.net/huangyong/jodd_demo/blob/master/jodd-example/src/main/java/jodd/example/servi ...
- [iOS] App引导页的简单实现 (Swift 2)
转载请注明出处:http://www.jianshu.com/p/024dd2d6e6e6# 已更新至 Xcode7.2.Swift2.1 在第一次打开App或者App更新后通常用引导页来展示产品特性 ...
- 关于一个下载的源代码中的”*.vssscc“文件的问题
今天下载了一份程序的源代码,老是提示我要连接源代码管理服务器,这个……你的账号密码我怎么知道,有木有.于是上网搜罗了一番找来了解决方案,在这里分享给可能出现同样问题的童鞋. 首先说明一下什么是vsss ...
- MVC第一节 配置
1.View中的页面设置为起始页后导致404找不到文件. 解决方案:右键属性,把特定页置为空. 2.新建的MVC项目会把系统默认的浏览器作为浏览方式,如果想要改变的话.可以在项目中新建一个webFor ...
- iOS调节系统音量
目录[-] 使用MPVolumeView 编程实现系统音量调节2 通过MPVolumeSlider的实例来操作系统音量 有问题!我不喜欢系统弹出音量提示 还有问题,我修改了系统音量但是不是通过我的UI ...
- git 笔记记录
分布式版本控制系统Git 是一套内容寻址文件系统,从核心上来看不过是简单地存储键值对.一: git 本地clone 一个仓库 1. 直接clone一个仓库: $: git clon ...