flex布局篇（二）

淡淡的烟草味﹌ 2022-07-15 13:29 200阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/52909949][http_blog.csdn.net_zhou_xiao_cheng_article_details_52909949]，未经博主允许不得转载。  
在[上一篇文章][Link 1]中，我们学习了flex布局的一些基本知识，今天这篇呢，主要讲讲如何采用flex布局实现导航栏固定的布局。  
如下图，我们希望导航栏部分永远固定在网页顶端，然后采用拖拽滚动条的方式查看精彩的网页内容。这种布局十分地常见，并且比较美观，到底怎么做出来的呢？OK，往下看 ==

![这里写图片描述][20161023011701715]

首先，你需要理解一个很重要的，但其实很简单的问题。  
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%; }

效果图：

![这里写图片描述][20161024093855820]  
现在拖拽滚动条，就可以看到完整的网页内容，拖到网页底部时，导航栏就看不见了。  
这里，就要引入一个新的属性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; }

[http_blog.csdn.net_zhou_xiao_cheng_article_details_52909949]: http://blog.csdn.net/zhou_xiao_cheng/article/details/52909949
[Link 1]: http://blog.csdn.net/zhou_xiao_cheng/article/details/52894859
[20161023011701715]: /images/20220715/41e18d244ff8481a98bf35385c622ba1.png
[20161024093855820]: /images/20220715/2377144f167344b79bc48af0b1fd24f3.png