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中的自动装箱与拆箱
自动装箱和拆箱从Java 1.5开始引入,目的是将原始类型值转自动地转换成对应的对象.自动装箱与拆箱的机制可以让我们在Java的变量赋值或者是方法调用等情况下使用原始类型或者对象类型更加简单直接. 如 ...
- [原创]HTML5 web性能监控策略
web性能重要指标--时长 通常在监控前端页面性能的时候,我们会需要获取到很多的时间戳,比如用户按下回车的时候开始计时,但这个时候,我们统计的js代码并没有加载过来,也无法读取到相关的信息.在HTML ...
- Hive 7、Hive 的内表、外表、分区(22)
Hive 7.Hive 的内表.外表.分区 1.Hive的内表 Hive 的内表,就是正常创建的表,在 http://www.cnblogs.com/raphael5200/p/5208437.h ...
- Android笔记(二):从savedIndstanceState发散
savedIndstanceState savedIndstanceState位于ActivityonCreate(Bundle savedInstanceState)方法的参数中.对这个参数的理解要 ...
- 关于Spring配置 (Cannot find class [org.apache.commons.dbcp.BasicDataSource] 问题)
myeclipse抛出异常 org.springframework.beans.factory.CannotLoadBeanClassException: Cannot find /webapps/t ...
- HTML获取用户输入的几种玩法
input标签 input是一个自闭和标签,可以获得用户的输入 form标签 form标签是用来进行表单提交用的,它把用户的输入内容提交到服务器. 一个注册页面的例子 <!DOCTYPE htm ...
- [深入React] 5.MVC
react 是一种典型的MVC框架. 在jquery中,我们都是针对dom编程,由dom事件触发dom改变,MVC三层代码混在一起. 比如点击变颜色 $('#btn').click(function( ...
- lesson5:Condition的原理分析及demo展示
Condition 将 Object 监视器方法(wait,notify,和notifyAll)分解成截然不同的对象,以便通过将这些对象与任意Lock实现组合使用,为每个对象提供多个等待 set(wa ...
- Windows 右键快速运行命令行
原文见:右键命令行 - yacper - 博客园 方法一:配置文件夹选项 1 打开人任意文件夹,[工具] --> [文件夹选项] --> [文件类型] --> [(无)资料夹] -- ...
- 配置 VS 2015 开发跨平台手机应用
为了使用 VS 2015 开发跨平台手机应用,VS 2015 装了很多次,遇到了很多坑,才终于弄明白怎样配置才能正常使用C#开发手机应用,现把步骤分享给大家,以免大家少走弯路. 运行环境: Windo ...