使用flex布局轻松实现页面布局代码示例

本篇文章小编给大家分享一下使用flex布局轻松实现页面布局代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

代码如下：

1、上中下布局：

    
    
     
     Header
     
Content
     
Footer
    
    

显示效果如下：

2、左右布局：

    
    
    
     
     LeftNav
     

     
Header
     
Content
     
Footer
     
    
    

页面的效果如下：

下面对几个关键的样式加以说明，这样就可以设计出任何想要的布局了：

css;">flex-grow: 1; // 表示容器在主轴的宽度有多余时该子项占据剩余空间
position：absolute; left: 0;right: 0; top: 0; bottom: 0; // 这一组样式让该元素占满定位的父级元素