13518219792

怎么使用flex布局轻松实现页面布局-创新互联

小编给大家分享一下怎么使用flex布局轻松实现页面布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了头屯河免费建站欢迎大家使用！

直接上代码：

1、上中下布局：



    
    
     
     
     Document
     
    
    
     Header

Content

Footer

显示效果如下：

怎么使用flex布局轻松实现页面布局

2、左右布局：


    
    
     
     
     Document
     
    
    
     LeftNav

Header Content Footer

页面的效果如下：

怎么使用flex布局轻松实现页面布局

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

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

以上是“怎么使用flex布局轻松实现页面布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

名称栏目：怎么使用flex布局轻松实现页面布局-创新互联
文章转载：http://cdweb.net/article/depcpj.html

NEWS