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布局是什 ...
随机推荐
- ArcMap中的名称冲突问题
这是一个非常有趣的问题. 现在我一个点层叫"汶川73",有一个面层也叫"汶川73",使用空间连接工具来计算每个面中被落入有多少个点.但不管怎么算,结果都只能生成 ...
- SharePoint 2013 使用PowerShell创建State Service
今天,搞SPD配置的sp2010wf迁移到sp2013环境上去,发布解决方案都很正常,给列表添加wf的时候报错“该表单无法显示,可能是由于 Microsoft SharePoint Server St ...
- 代码导出Reporting Services报表文件
背景部分 使用Reporting Services很容易制作和发布我们需要的报表,报表效果也还不错 不过如果报表数据过大或报表数量过多,打开及查看报表感觉可能就是另外一回事了 好在Reporting ...
- Android—SQLITE数据库的设计和升降级
Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也非常的强大.SQLite具备下列特点: 1.轻量级 使用 SQLite 只需要带一个动 ...
- hadoop实战–搭建eclipse开发环境及编写Hello World
原创文章,转载请注明: 转载自工学1号馆 欢迎关注我的个人博客:www.wuyudong.com, 更多云计算与大数据的精彩文章 1.在eclise中安装hadoop的插件并配置 在上篇文章<编 ...
- 关于Socket建立长连接遇到的bug信息
下面是本人在Socket连接的开发中遇到的bug总结 1."远程服务器关闭了Socket长连接'的错误信息 2.关于"kCFStreamNetworkServiceTypeVoIP ...
- 一些在IOS中关于JS、H5开发的网站
1.JSPatch 2.
- 短信SMS的接收
近日,看了<第一行代码>有关短信接收的内容,就总结了一下. 1.手机接收到一条短信时,系统会发出一条android.provider.Telephy.SMS_RECEIVER的广播,这条广 ...
- SQLServer中登录名的用户名配置
其实这个问题困扰我很久了. 今夏(13.7)实习的时候第一次接触sqlserver 当时是统一安排,按部就班的做就行. 那时候链接数据库用的id是sa. 后来自己做小程序时候举得不管什么都用sa登录好 ...
- DLL分类
使用def文件简化dll导出 VS查看DLL接口