解析博客前端的flex布局

需求:
纵向三栏布局:头部、主体、尾部
1.当不出现滚动条的时候头部和尾部固定在头和底侧，主体撑开剩余高度
2.当出现滚动条的时候尾部跟在主体后面被撑下去
。

本博客项目地址

实现目标：

实现代码:

  
  
  
  
  


   

     

         我是头部啊
     
     

       我是主体，我最牛逼,我高度能自适应，我能把footer带跑偏
        改变我的内容，我高度就自适应了
     
     
我是尾部
   

程序说明:

1. 现将html和body以及主体div元素的高度设置成100%;让高度撑满真个屏幕;
2. 将主体div元素的display设置成flex,然后flex-direction属性设置成column；
3. 将footer和header的flex属性设置成0 0 100px,表明不管是否有剩余空间，还是剩余空间不足，我的高度都固定在100px；
4. 将主体div的flex属性设置成1 0 auto,当最后一个属性值是auto的时候表明他的主轴宽度取决于第一个属性flex-grow,也就是有剩余空间的时候，占满剩余空间；中间设置成0表明，剩余空间不够的时候主轴宽度也不压缩。
5. 大功告成，改变主体div的高度吧！

注意:

这是一个flex布局的实战；如果不懂flex布局，请看
一个完整的Flexbox指南
理解Flexbox：你需要知道的一切