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. javascript-this,call,apply,bind简述2

    上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...

  2. VisualStudio中解决方案

    在VS中创建一个项目通常会生成一个解决方案文件(.sln)和一个隐藏的解决方案用户选项文件(.suo). 解决方案文件是一个文本文件,包含以下信息: 将被加载的所有项目以构成完整解决方案的项目清单 解 ...

  3. 安卓开发_浅谈Android动画（二）

    在学习了四个基本动画之后,现在要学习一些更有用的效果 先给出所有的动画xml <?xml version="1.0" encoding="utf-8"?& ...

  4. Android 在外部存储读写文件

    本文主要介绍android中如何在外部存储读写数据 sd卡的路径 sdcard:2.3之前的sd卡路径 mnt/sdcard:4.3之前的sd卡路径 storage/sdcard:4.3之后的sd卡路 ...

  5. Spring(七)持久层

    一.Spring对DAO的支持 DAO:Data Access Object Spring提供了DAO框架,让开发人员无须耦合特定的数据库技术,就能进行应用程序的开发. Spring封闭了操作Orac ...

  6. iOS开发笔记5：多线程之NSThread、NSOperation及GCD

    这篇主要总结下iOS开发中多线程的使用,多线程开发一般使用NSThread.NSOperation及GCD三种方式,常用GCD及NSOperation. 1.NSThread 创建线程主要有以下三种方 ...

  7. Silverlight项目笔记4:初识Prism以及IoC

    1.Prism Prism是由微软Patterns & Practices团队开发的针对WPF和Silverlight的MVVM框架. Prism的几个关键点: (1)启动器类UnityBoo ...

  8. Xcode的内存清理

    1.删除Xcode中多余的证书provisioning profile 手动删除: 打开finder,然后在最上面的前往中前往下方的路径,就可以看到你xcode运行到现在使用过的证书provision ...

  9. 常用oracle函数

    一.逗号拼接字段 SELECT LISTAGG(aa, ',') WITHIN GROUP (ORDER BY aa) AS AA FROM *** where id<5 输出结果例如:1,2, ...

  10. Swing应用开发实战系列之二：设计日期选择面板窗口

    Swing本身没有提供什么华丽丽的日期时间选择控件,所以笔者就在网上搜了个第三方的jar包jdatepicker-1.3.2.jar,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...