代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>flex弹性布局</title>

    <style type="text/css">

        .extract-list {

            margin: 20px auto;

            max-width: 1030px;

            display: -webkit-box;

            display: -moz-box;

            display: -ms-flexbox;

            display: -webkit-flex;

            display: flex;

            -webkit-flex-flow: row wrap;

            flex-flow: row wrap;

            justify-content: space-between;

        }

        .extract {

            position: relative;

            margin: 0 15px 50px;

            -webkit-flex: 1 0 300px;

            -moz-flex: 1 0 300px;

            -ms-flex: 1 0 300px;

            -o-flex: 1 0 300px;

            flex: 1 0 300px;

            -webkit-align-items: stretch;

            align-items: stretch;

            border: 1px solid #eee;

            border-bottom-width: 2px;

            border-radius: 5px;

            background-color: #fff;

            display: inline-block;

        }

        .extract a {

            display: block;

            color: #999;

            text-decoration: none;

        }

        .extract-top {

            position: relative;

            width: 100%;

            height: 125px;

            text-align: center;

            border-radius: 5px 5px 0 0 ;

            background: #5FCF80 url(images/extract_1.jpg) no-repeat;

            background-size: cover;

            background-position: 50%;

        }

        .extract:hover .extract-top:before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background-color: rgba(182, 192, 199, 0.45);

        }

        .extract-main {

            padding: 10px 20px;

            font-size: 16px;

        }

        .extract-main p.category {

            font-size: 12px;

            color: #ccc;

        }

        .extract-main p {

            font-size: 14px;

        }

        .extract-main h3 {

            color: #333;

        }

    </style>

</head>

<body>

    <div class="extract-list">

        <div class="extract">

            <a href="#">

                <div class="extract-top"></div>

                <div class="extract-main">

                    <p class="category">in Category</p>

                    <h3>标题1</h3>

                <div>

                    <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br>

                这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>

                    <p><!--other buttons--></p>

                </div>

            </div>

        </a>

</div>

<div class="extract">

    <a href="#">

        <div class="extract-top"></div>

        <div class="extract-main">

            <p class="category">in Category</p>

            <h3>标题1</h3>

            <div>

                <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br>

            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>

                <p><!--other buttons--></p>

            </div>

        </div>

    </a>

</div>

<div class="extract">

    <a href="#">

    <div class="extract-top"></div>

    <div class="extract-main">

        <p class="category">in Category</p>

        <h3>标题1</h3>

        <div>

            <p>这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容<br>

            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>

            <p><!--other buttons--></p>

        </div>

    </div>

</a>

</div>

</div>

</body>

</html>

效果图：

flex应用实例的更多相关文章

  1. flex dispatchEvent 实例

    flashbuilder sdk:3.6:jdk:1.7,:tomcat:7:myeclipse:10.0 Flex dispatchEvent实例下载:点击打开链接 Flex dispatchEve ...

  2. Flex 布局实例

    如图: 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> < ...

  3. flex布局实例demo全解

    上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...

  4. [css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分

    全是代码,直接拷走吧,看是不怎么好看的 参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9ska ...

  5. Flex：实例

    目的: 代码: <!--pages/index/index.wxml--> <view class="container"> <view class= ...

  6. Flex 布局教程实例

    Flex 布局教程实例 一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...

  7. Flex Socket与Java通信实例说明（转）

    Flex Socket与Java通信实例说明(转) 这两天一直在flex的Socket ,现在终于懂了很多.由浅到深一步一步深入.慢慢体会实例,虽然实例都是在网上找的,但也经过了我的测试.我比较喜欢注 ...

  8. flex布局语法+实例

    一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...

  9. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

随机推荐

  1. Block pool ID needed, but service not yet registered with NN java.lang.Exception: trace 异常解决

    以上为报错信息: 原因大概为:dd和nd关联的versionId不同导致, 解决方案,备份之前的current文件夹,让其自己生成新的.

  2. mysql命令、mysqldump命令找不到解决

    1.解决bash: mysql: command not found 的方法 [root@DB-02 ~]# mysql -u root -bash: mysql: command not found ...

  3. iOS-KVO（转）

    参考学习网址:http://blog.sina.com.cn/s/blog_71715bf8010166ut.html KVO就是NSKeyValueObserving的缩写,它也是Foundatio ...

  4. RobotFramework：发现一个大坑，当post接口入参为json时，千万不能用sojson转化后的json串（ride解析会有异常，非sojson工具问题），直接用浏览器粘过来的就行

    问题背景: 和以往一样愉快的进行着自动化测试,突然就不停的提示我,“程序异常”,查看log发现data中的json变为了数组?????? 那算了,我不先组装入参数据直接data=json入参吧,wha ...

  5. leetcode1277 Count Square Submatrices with All Ones

    思路: 使用动态规划,dp[i][j]表示以(i, j)作为右下角的最大的全1矩阵的边长. 实现: class Solution { public: int countSquares(vector&l ...

  6. leetcode1130 Minimum Cost Tree From Leaf Values

    思路: 区间dp. 实现: class Solution { public: int mctFromLeafValues(vector<int>& arr) { int n = a ...

  7. MyBatis框架总结

    一. MyBatis简介 MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果集的检索.MyBati ...

  8. [翻译向] 当flush privileges生效时

    #前言: 最近频繁在mysql权限控制这里栽跟斗,在翻阅了一些资料之后,简单地翻译一下官网关于flush privileges的描述,抛砖引玉.   #翻译正文: If the mysqld serv ...

  9. iOS开发支付篇——内购(IAP)详解

    1 <em>内购所需要的资料整理总结,史上最完整的,哈哈哈哈哈哈</em> 思维导图 重点总结: 1 2 3 4 5 6 7 8 9 10 11 12 13 1.获取内购列表( ...

  10. ARTS第七周打卡

    Algorithm : 做一个 leetcode 的算法题 ////////////////////////////////////////////////////////////////////// ...