.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. 高性能Java解析器实现过程详解

    如果你没有指定数据或语言标准的或开源的Java解析器, 可能经常要用Java实现你自己的数据或语言解析器.或者,可能有很多解析器可选,但是要么太慢,要么太耗内存,或者没有你需要的特定功能.或者开源解析 ...

  2. activity theme parent 属性浅析

    在AndroidManifest.xml文件中,可以对每一个Activity设置android:themetheme的设置 可以设置为系统自带的格式,也可以自定义格式. A: 系统自带格式 1.and ...

  3. android学习笔记---63-PopupWindow,泡泡窗口的实现

    转载http://blog.csdn.net/lidew521/article/details/8976627 PopupWindow是一个可以显示在当前Activity之上的浮动容器,PopupWi ...

  4. leetcode:Palindrome Number (判断数字是否回文串) 【面试算法题】

    题目: Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could neg ...

  5. Android实现图片放大缩小

    package com.min.Test_Gallery; import android.app.Activity; import android.graphics.Bitmap; import an ...

  6. qemu-img 快照的一些总结

    qemu-img 快照的一些总结 http://www.openext.org/2014/06/qemu-img-snapshot-re http://blog.csdn.net/muge0913/a ...

  7. Java基础知识强化63:Arrays工具类之方法源码解析

    1. Arrays工具类的sort方法: public static void sort(int[] a): 底层是快速排序,知道就可以了,用空看. 2. Arrays工具类的toString方法底层 ...

  8. IIS7的安装详解

    IIS7安装流程规范 1,   IIS常用的功能模块介绍: 1)         静态内容:可发布静态 Web 文件格式,比如 HTML 页面和图像文件. 2)         默认文档:允许您配置当 ...

  9. Java初转型-Tomcat安装和配置

    1.http://www.cnblogs.com/diegodu/p/5915358.html tomcat直接解压,启动然后测试是否正常. 2.http://www.cnblogs.com/mq00 ...

  10. NumberBox( 数值输入框) 组件

    本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件.一. 加载方式//class 加载方式<input typ ...