flex布局滑动页面
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布局滑动页面的更多相关文章
- 仿淘宝使用flex布局实现页面顶部和底部的固定布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 谈谈flex布局实现水平垂直居中
我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...
- 小程序使用scroll-view横向滑动时，flex布局失效问题
最近在完善以前项目,类目增多,需要进行横向滑动 实现方法1 可以在外盒子scroll-view使用white-space: nowrap来禁止子盒子换行,子盒子使用display: inline-bl ...
- Flex布局做出自适应页面--语法和案例
本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...
- flex布局浅谈和实例
阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程：实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
随机推荐
- lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- SAP RFC通信模式
在网络技术中,数据通信可以大致划分为两种基本模式:同步通信和异步通信. 其本义是:异步通信时,通信双方时钟允许存在一定误差:同步通信时,双方时钟的允许误差较小.在SAP的系统间的通信过程中,也借用术语 ...
- SharePoint 2013 的HTML5特性之响应式布局
今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...
- 【原】iOSCoreAnimation动画系列教程（二）：CAKeyFrameAnimation【包会】
在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iOS核心动画CoreAnimation中CABasicAnimation ...
- Swift开发第一篇——异常处理及断言
本篇分两部分: 1.错误和异常处理 2.Swift 中的断言 1.错误和异常处理 在 OC 开发中,我们通常会将 error 置为 nil NSError *error; BOOL success = ...
- 我的android学习经历12
自动匹配输入的内容(文章最后有一个问题有兴趣的可以解答一下,谢谢大神了) 这个主要是两个控件MultiAutoCompleteTextView和AutoCompleteTextView 这两个控件和T ...
- MYSQL的慢查询两个方法
对于排查问题找出性能瓶颈来说,最容易发现并解决的问题就是MYSQL的慢查询以及没有得用索引的查询. ================================================== ...
- 局域网内搭建git
git简介:请大家参看git官网的介绍 http://git-scm.com/book/zh/v1 还有这位大神的git教程:http://www.liaoxuefeng.com/wiki/0013 ...
- Android多进程需要注意的一个地方
可能很多项目都会有一个自定义的Application,做一些初始化操作以及全局化的一些数据保存,这时如果程序中定义了远程服务(android:process=":remote"), ...
- 菜鸟程序员之Asp.net MVC Session过期异常的处理
小赵是刚毕业的计算机专业方面的大学生,4年的大学时间里面,他读过了很多编程方面的数据,也动手也了很多代码.现在毕业了,他如愿的加入了T公司,开始了自己的程序员生涯.他信心满满,相信自己4年的学习到的东 ...