.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端用的,哈哈! 

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

  1. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  2. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  3. CSS Flex

    关于flex 请看这里  https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 太详细啦!!!  还通俗易懂!!! 没啥好说的 不过上面那篇文 ...

  4. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  5. [Web 前端 ] 还在用浮动吗?CSS flex布局你了解多少?

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  6. css Flex布局(一)

    网页布局(layout) 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 6个属性 ...

  7. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  8. css flex弹性布局学习总结

    一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...

  9. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

随机推荐

  1. storm高级原语-Transactional topology

    参考: http://xumingming.sinaapp.com/736/twitter-storm-transactional-topolgoy/ http://xumingming.sinaap ...

  2. 【转】H264视频编码级别说明profile level Encoder

    版权声明:本文为博主原创文章,未经博主允许不得转载. 首先要阐明所谓的AVC其实就是H.264标准,是由ITU-T和ISO/IEC组成的联合视频组(JVT,Joint Video Team)一起开发的 ...

  3. Android笔记(一):从this关键字发散

    this指的是直接包含它的类的实例. 例如: public class MyClass{ int num; public MyClass(int num){ this.num = num; } } 这 ...

  4. Struts+Spring搭建

    前言 本文以Tomcat为j2ee容器,数据库为Sqlserver2005进行说明.Struts版本为2.3.15.3,Spring版本为3.2.5 Spring简介 Spring也是appache下 ...

  5. HTML, CSS学习笔记(完整版)

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  6. c#中从string数组转换到int数组

    以前一直有一个数组之间转换的东西,可是忘记了,今天也是找了好久也没有解决,最后用这种方法解决了,分享给大家. " }; int[] output = Array.ConvertAll< ...

  7. 好的android编码习惯

    上一期分享了android内存优化的一些总结,这一期说说我认为的好的编码习惯,然后下一期会做安卓数据库优化的一些总结,逐渐的会将一些性能优化点总结分享出来,肯定是不够全面的希望不足的地方欢迎指出. 良 ...

  8. C#winform检测电脑安装的.netframework版本和是否安装了某软件

    代码如下: //C#获取已安装 .NET Framework 版本 private static string[] GetDotNetVersions() { DirectoryInfo[] dire ...

  9. SUN-LDAP6.3_RHEL 5.0-卸载LDAP

    卸载LDAP 1.注销服务器 到目录/ldap/ldapinstance/dscc6/bin下 # ./dsccreg remove-server -h 主机名 /ldap/ldapinstance/ ...

  10. 开发日志_Jan.9

    今天主要工作为修改昨天的碰撞引擎不符合预期的部分. 经过了昨天的工作,碰撞算法已经初见雏形.但是主要有两个问题: 碰撞反弹的方向与预期不符合 碰撞后球与机器人存在一个"黏在一起"的 ...