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. 访问SAP的Domain的Value Range

    访问Domain的Value Range有两种方法: 1.直接访问表 dd07l和dd07T     select * from dd07l            where domname   = ...

  2. R语言学习笔记：小试R环境

    买了三本R语言的书,同时使用来学习R语言,粗略翻下来感觉第一本最好: <R语言编程艺术>The Art of R Programming <R语言初学者使用>A Beginne ...

  3. nutch简介

    1.什么是 nutch Nutch 是一个开源的. Java 实现的搜索引擎.它提供了我们运行自己的搜 索引擎所需的全部工具.2.研究 nutch 的原因(1) 透明度: nutch 是开放源代码的, ...

  4. C语言常量与指针

    C语言功能强大而丰富,还表现在const与指针的结合使用上,对不同的问题,它提供不同的保护,特别有用的是指向常量的指针 本文地址:http://www.cnblogs.com/archimedes/p ...

  5. 使用VideoView自定义一个播放器控件

    介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...

  6. 多线程之NSThread和NSObject

    #pragma mark - NSThread实现多线程 /* // 获取当前线程 NSLog(@"currentThread = %@", [NSThread currentTh ...

  7. 我们需要专职的QA吗？

    [ 引用评论里的一句话:hurt but true  抛开作者某些偏激的想法外,作者暴露出来的问题还是需要测试思考的: 1.TestCase,TestData,TestConfiguration 没有 ...

  8. redis高可用之REDIS SENTINEL

    1. Redis主从配置 1.1. 设置主从复制 Master <= Salve 10.24.6.5:6379 <= 10.24.6.7:6379 1.2.   取消主从复制 1.3.   ...

  9. [Eclipse配置] Eclipse代码中显示空白字符（空格，TAB和回车）的方法

    在代码页面点击右键进入 Preferences --> General --> Editors --> Text Editors. 在 Show whitespace charact ...

  10. Effective Java 35 Prefer annotations to naming patterns

    Disadvantages of naming patterns Typographical errors may result in silent failures. There is no way ...