flex布局篇（二）

本文原创地址链接：http://blog.youkuaiyun.com/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;
}