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. How to Get SharePoint Client Context in SharePoint Apps (Provider Hosted / SharePoint Access ) in CSOM (Client Side Object Model)

    http://www.codeproject.com/Articles/581060/HowplustoplusGetplusSharePointplusClientplusContex Downlo ...

  2. [转]Designing a User Interface

    UI design can be divided into three essential elements : functionality, aesthetics, and performance. ...

  3. windows分离系统文件和用户数据

    2013/12/17更新:使用了一段时间,开机时有时会出现一些错误,不过不影响正常使用,不能忍的是会经常更新,所以暂时不推荐使用. 为了方便地重装系统,同时保留用户数据,想到了分离windows系统文 ...

  4. log4net资料收集

    Log4net 日志使用介绍 http://www.cnblogs.com/jys509/p/4699813.html log4net Tutorial http://www.codeproject. ...

  5. SAM4E单片机之旅——19、CAN间通信

    CAN协议具有良好的可靠性,在工业中应用广泛.这次就先熟悉CAN的基本功能. 开发板有两个CAN,每个CAN有8个信箱.这次内容是从CAN0的信箱0发送数据到CAN1的信箱0. 除本次使用的功能外,C ...

  6. mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案

    本人开发项目时,在从一个服务器导出数据库到另一服务器时,存储过程中,报Incorrect DECIMAL value: '0' for column '' at row -1错误. 原因: 存储过程中 ...

  7. Error: Could not access the Package Manager. Is the system running?

    最近在搭建cordova,android 开发环境,安装android studio之后创建一个demo之后,运行想看一下效果,在运行过程中创建一个虚拟机(arm)的,等了有1分钟左右,再次运行程序, ...

  8. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  9. 微信微博分享注意事项（sharesdk）

    0.(重要)如果接入多渠道可以考虑微博微信appid appkey等信息放到服务端,方便临时修改又可避免很多渠道时替换ShareSDK.xml文件出错. 但是cocos2dx-2.x版本使用代码配置a ...

  10. Java中的流

    一.Java中流的原理 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以“流”的方式进行.设备可以是文件,网络,内存等. 四种基本流InputStream,Ou ...