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 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
随机推荐
- Java枚举7常见种用法
DK1.5引入了新的类型——枚举.在Java中它虽然算个“小”功能,却给我的开发带来了“大”方便. 方法/步骤 用法一:常量 在JDK1.5之前,我们定义常量都是:publicstaticfianl. ...
- PHP的输出缓冲区
什么是缓冲区?简单而言,缓冲区的作用就是,把输入或者输出的内容先放进内存,而不显示或者读取.至于为什么要有缓冲区,这是一个很广泛的问题,如果有兴趣,可以在网山找下资料.其实缓冲区最本质的作用就是,协调 ...
- android后台截屏实现(1)--源码编译
前段时间接到任务要实现后台截图并上传的功能,在网上查了好久,发现遇到这类问题的人还不少.经过一番对比后发现还是修改并编译源码中的screencap类然后通过JNI来调用这种方法比较可靠,而其他的在ja ...
- ruby gems安装镜像
由于每一个月都要升级两台gitlab server, ruby安装的源老是被墙,痛苦无比. 所以须要使用国内的镜像 在/home/git/gitlab/Gemfile文件里第一行改动为: # sour ...
- ibatis的selectkey
在使用ibatis插入数据进数据库的时候,会用到一些sequence的数据,有些情况下,在插入完成之后还需要将sequence的值返回,然后才能进行下一步的操作. 使用ibatis的sel ...
- 宙斯是一个完整的Hadoop的作业平台[转]
https://github.com/alibaba/zeus 宙斯(zeus)是什么 宙斯是一个完整的Hadoop的作业平台从Hadoop任务的调试运行到生产任务的周期调度 宙斯支持任务的整个生命周 ...
- mysql索引简单介绍
索引从本质上来说也是一种表,这样的表存储被列为索引的列项值和指向真正完整记录的指针.索引对用户透明.仅仅被数据库引擎用来加速检索真实记录.有索引的表.insert和update操作会耗费很多其它时间而 ...
- Win7_x64下卸载Oracle11g
Windows下Oracle11g卸载顺序1.计算机管理-->服务和应用程序-->停止所有Oracle相关服务2.运行D:\app\Administrator\product\11.2.0 ...
- 前端 HTML基础
前端三大利器概述 学习前端,不得不学习前端中的三大利器:html + css + javascript.那么这三个组件分别起到什么作用呢?以人体为例,单单具有html属性的人,只是一个裸体的人偶(理解 ...
- DataGrid( 数据表格) 组件[7]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...