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布局是什 ...
随机推荐
- QT4/5中文乱码问题解决
QT4 : QTextCodec::setCodecForTr(QTextCodec::codecForName("UTF-8")); QT5: #if defined(_MSC_ ...
- ad组策略和sharepoint office打开文档关系
组策略管理器 组策略继承 新建组策略 更新组策略 服务器端 1.cmd命令:gpupdate /force 2.更新ad站点与服务,针对多台ad 客户端 1.cmd命令:gpupdate /force ...
- VC连接mysql数据库错误：libmysql.lib : fatal error LNK1113: invalid machine 解决方法
VC连接MySQL的配置过程在上一篇博文中,不过当你设置好,以为万事大吉的时候,运行却出现这个错误:libmysql.lib : fatal error LNK1113: invalid machin ...
- 安卓问题集-Installation error: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED
错误出现原因: 1.没有 AndroidManifest.xml file文件(出现几率较小) 2. 是你在外面修改了包名而在 AndroidManifest.xml file.文件中没有同步过去导致 ...
- mybatis实战教程(mybatis in action),mybatis入门到精通(转)
转自:http://www.yihaomen.com/article/java/302.htm (读者注:其实这个应该叫做很基础的入门一下下,如果你看过Hibernate了那这个就非常的简单) (再加 ...
- Spring(二)Bean入门
一.BeanFactory介绍 1.1.Bean: 在Spring技术中是基于组件的 最基本了是最常用的单元 其实实例保存在Spring的容器当中 Bean通常被定义在配置文件当中,Bean实例化由S ...
- UnityShader之顶点片段着色器Vertex and Fragment Shader【Shader资料】
顶点片段着色器 V&F Shader:英文全称Vertex and Fragment Shader,最强大的Shader类型,也是我们在使用ShaderLab中的重点部分,属于可编程管线,使用 ...
- iOS中的触摸事件和手势处理
iOS中的事件可以分为三大类: 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并 ...
- ios 计算缓存大小
- (void)getSize2 { // 图片缓存 NSUInteger size = [SDImageCache sharedImageCache].getSize; // NSLog(@&qu ...
- Cocos2d入门--1--初涉相关属性或代码
Cocos2d vision: cocos2d-x-3.8.1 万丈高楼,起于累土.对于一个游戏框架的学习,其实在于框架功能的使用积累,学会了如何在cocos2d游戏引擎的基础上使用它提供的各种功能 ...