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

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

成都创新互联主要从事成都网站制作、成都网站设计、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务泗阳,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

直接上代码:

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://myzitong.com/article/jejsse.html