html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex</title>

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

    <link rel="stylesheet" href="css/globel.css">

</head>

<body>

    <div class="container">

        <article>

            <section>1</section>

            <section>2</section>

            <section>3</section>

            <section>4</section>

            <section>5</section>

            <section>6</section>

        </article>

    </div>

</body>

</html>

css:

* {

  margin:;

  padding:;

  list-style: none;

}

html, body {

  width: 100%;

  height: 100%;

  overflow: hidden;

}

.container {

  width: 100%;

  height: 100%;

}

.container article {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -wekit-box-orient: vertical;

  -webkit-flex-direction: column;

  flex-direction: column;

  -wekit-box-lines: single;

  -webkit-flex-wrap: nowrap;

  flex-wrap: nowrap;

  height: 100%;

}

.container article section {

  -webkit-flex: 1 0 auto;

  flex: 1 0 auto;

  width: 100%;

  height: 100%;

  background-color: #ccc;

}

flex布局滑动页面的更多相关文章

  1. 仿淘宝使用flex布局实现页面顶部和底部的固定布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 谈谈flex布局实现水平垂直居中

    我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...

  3. 小程序使用scroll-view横向滑动时，flex布局失效问题

    最近在完善以前项目,类目增多,需要进行横向滑动 实现方法1 可以在外盒子scroll-view使用white-space: nowrap来禁止子盒子换行,子盒子使用display: inline-bl ...

  4. Flex布局做出自适应页面--语法和案例

    本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...

  5. flex布局浅谈和实例

    阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...

  6. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  7. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. SharePoint 使用PowerShell恢复误删的网站集

    在SharePoint网站集的使用中,我们很有可能会误删我们需要的网站集,SharePoint其实并没有把网站集删掉,只是放到了SPDeletedSite中,这样,我们还可以通过PowerShell找 ...

  2. Stanford机器学习课程(Andrew Ng)

    斯坦福大学机器学习视频教程(附学习笔记,potplay播放器,PPT等资料),很具有学习价值. 链接:http://mooc.guokr.com/note/16274/

  3. 读书笔记2013第10本：《学得少却考得好Learn More Study Less》

    <学得少却考得好Learn More Study Less>这本书最早是从褪墨网站上看到的,crowncheng翻译了全文.这本书介绍了不少学习方法,非常适合在校的学生,原文的作者Scot ...

  4. java多线程系列4-线程池

    在之前的文章中,学习了通过实现java.lang.Runnable来定义类,以及像下面这样创建一个线程来运行任务: Runnable task = new TaskClass(task); new T ...

  5. IOS 网络浅析－（十 NSURLSession下载简介）

    之前本来打算在写两个篇幅,但是在这片开写的时候觉得还是写一个比较好,有利于理解.NSURLSession下载是通过NSURLSession下载代理实现的,上一片也介绍了代理,之所以没有介绍下载是因为, ...

  6. 关于touch事件对于性能的影响

    第一次写博客随笔,废话不多说,直接进入正题. 最近一直专注于移动终端的开发,碰到了一个比较棘手的事情,就是touch事件,大家都知道,touch事件有几种,无非就是touchstart,touchmo ...

  7. 《SQL Server企业级平台管理实践》读书笔记——当我们的备份都已经损坏的时候该怎么办

    作为数据库管理员最最痛苦的莫过于,当数据库宕机的时候需要找备份,但在这个时候突然发现备份文件也是坏的,这就意味着数据会丢失,为此可能会丢掉职位,饭碗不保,所以为此,我们一定要保证好备份的完整性,一般发 ...

  8. 关于nginx的限速模块

    nginx 使用 ngx_http_limit_req_module和ngx_http_limit_conn_module 来限制对资源的请求 这种方法,对于CC攻击(Challenge Collap ...

  9. c# 反射简单使用

    类库dll,将生成ExampleLib.dll文件 namespace ExampleLib { public class Example { public static string FuncA() ...

  10. Spring配置文件外部化配置及.properties的通用方法

    摘要:本文深入探讨了配置化文件(即.properties)的普遍应用方式.包括了Spring.一般的.远程的三种使用方案. 关键词:.properties, Spring, Disconf, Java ...