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. 如何通过PowerShell在Visual Studio的Post-build中预热SharePoint站点

    问题现象 Visual Studio在开发SharePoint的时候,发布部署包后,首次打开及调试站点页面的时候会非常的慢 解决方案 使用PowerShell脚本,加载SharePoint插件后遍历所 ...

  2. android 保存 用户名和密码 设置等应用信息优化

    1.传统的保存用户名,密码方式 SharedPreferences Editor editor = shareReference.edit(); editor.putString(KEY_NAME,& ...

  3. java.lang.RuntimeException: Fail to connect to camera service问题

    做音视频录制功能的真机调试的时候出现这个问题 错误意思为无法连接到相机服务 可能由两种情况导致 1.配置清单文件没有设置相应的权限 <uses-permission android:name=& ...

  4. 解决SSIS中的脚本任务无法调试的问题

    开发环境:操作系统环境为Win7 64Bit,数据库为SQLServer2008R2 问题现象:在SSIS的项目工程中,新建Package包,新建脚本任务,编写脚本程序以后,设置断点无法调试(Debu ...

  5. 数位类统计问题--数位DP

    有一类与数位有关的区间统计问题.这类问题往往具有比较浓厚的数学味道,无法暴力求解,需要在数位上进行递推等操作.这类问题往往需要一些预处理,这就用到了数位DP. 本文地址:http://www.cnbl ...

  6. 【读书笔记】iOS-Coco内存管理规则-拥有对象

    一,事件循环.一个典型的图形应用程序往往花费很多时间等待用户操作.在控制程序运行的人非常缓慢地作出决定(例如单击鼠标或按下某个键)以前,程序将一直处于空闲状态.当发生这样的事件时,程序被唤醒并开始工作 ...

  7. WPF Caliburn.Micro ListView 批量删除 新方法.高效的

    上一片我做的批量删除,是更具ListView的选项改变事件,然后放到一个全局变量里面,缺点已经说了.这次又找到一个好的方法.和大家分享一下.这次我将删除按钮的click事件里面的参数绑定为ListVi ...

  8. INFORMATICA 的调优之一 源数据的优化

    5W1H法来实现源数据的优化 做数据仓库项目的朋友都能感到数据质量和数据抽取展现的性能是整个数据仓库项目的重点.下面谈谈我在DW项目中处理源数据质量问题的5W1H方法. 5W : WHO ,WHAT, ...

  9. 【故障处理】ORA-30012的解决过程

    [故障处理]ORA-30012的解决过程 1  BLOG文档结构图 2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O ...

  10. cocos2d-x之Action特效

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...