flex布局篇(二)
来源:互联网 发布:天下3男神捏脸数据 编辑:程序博客网 时间:2024/05/16 10:35
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52909949,未经博主允许不得转载。
在上一篇文章中,我们学习了flex布局的一些基本知识,今天这篇呢,主要讲讲如何采用flex布局实现导航栏固定的布局。
如下图,我们希望导航栏部分永远固定在网页顶端,然后采用拖拽滚动条的方式查看精彩的网页内容。这种布局十分地常见,并且比较美观,到底怎么做出来的呢?OK,往下看 ==
首先,你需要理解一个很重要的,但其实很简单的问题。
Question: 为什么会出现滚动条?
Answer: 因为网页内容太多了,固定高度的页面容不下它了,除非你的显示器和网页内容一样长(哈哈,自行脑补那么长的显示器),不然,就要有滚动条,这样,你才能通过拖拽滚动条的方式,查看完整的网页内容。
利用上篇学的东西,很容易做出这样的:
HTML:
<div class="container"> <div class="nav"> 我是导航栏,颜色是深灰色 </div> <div class="content"> 我是网页内容,颜色是浅灰色 <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </div></div>
CSS:
body, html { height: 100%; margin:0;}p { height: 40px;}.container{ display: flex; height: 100%; flex-direction: column;}.nav{ flex-shrink: 0; /*flex容器空间不足时,不缩小,不然导航栏就可能看不见了*/ height: 50px; width: 100%; background-color: gray;}.content{ flex-grow: 1; /*flex容器有剩余空间,则自动扩大*/ background-color: #d8d8d8; width: 100%;}
效果图:
现在拖拽滚动条,就可以看到完整的网页内容,拖到网页底部时,导航栏就看不见了。
这里,就要引入一个新的属性overflow了,只需要知道,这个属性的唯一功能,就是能够解决:元素高度和元素内容高度不一致的问题。
overflow: visible(默认值) | auto | hidden | scroll | inherit
下面会对该属性的值逐一进行分析,为了更便于理解,以下全部使用网页内容高度与网页高度( <div class="content"></div>
)进行说明,若没有说明,以下所说的滚动条均指的是垂直方向上的滚动条。
属性值解释:
- visible: 默认值,效果如上图,当content内容比较多时,不会因为content的高度不够长,就将剩余的content内容(图中内容10)剪掉,而是给出滚动条,让你能够查看内容10。
- auto: 根据content内容的高度决定要不要给出滚动条:
content内容的高度 >content的高度,在content上给出滚动条,让你能够查看查看剩余的content内容(内容10);
content内容的高度 <= content的高度,content上没有滚动条。 - hidden: content内容的高度 > content的高度时,多出的部分(内容10)被剪切掉,看不到了。
- scroll: 水平和垂直方向一直有滚动条,和其它因素无关。
inherit: 继承父元素的属性值。
理解了这个属性的各个值后,我们只需要在content的CSS样式里加上最后一句就可以啦。。。
.content{ flex-grow: 1; /*flex容器有剩余空间,则自动扩大*/ background-color: #d8d8d8; width: 100%; overflow: auto;}
0 0
- flex布局篇(二)
- Flex布局(二)
- Flex 布局教程:实例篇(二)
- Flex 布局教程(二):实例篇
- flex布局(二)--实例
- CSS3弹性伸缩布局(二)——flex布局
- flex布局篇(一)
- 微信小程序前置课程:flex布局(二)
- flex布局(弹性布局)
- flex布局(弹性布局)
- Flex 布局教程:语法篇(阮一峰)
- flex布局教程(实例篇)
- Flex 布局教程:语法篇(css)
- flex布局基础(容器篇-即父级)
- Flex 布局:语法篇
- Flex 布局:实例篇
- flex布局语法篇
- flex布局实战篇
- tomcat的CATALINA_TMPDIR临时目录
- Android6.0源码解读之ViewGroup点击事件分发机制
- java多线程之CAS
- PCB设计中如何选择自动布线和手动布线?
- textfield左起偏移
- flex布局篇(二)
- Android APP架构设计——MVP的使用示例
- vi编辑器
- strcpy函数引起的思考
- 教师信息
- Oracle Linux 安装图形界面
- 一些常用的方法工具类
- redis的三种启动方式
- 【解决方案】extjs 怎么取消 gridPanel 分页工具栏上的刷新按钮