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

作者:袖梨 2020-10-19

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

代码如下:

1、上中下布局:



    
    
     
     Header
Content

显示效果如下:

2、左右布局:

    
    
    
     
     LeftNav
Header
Content

页面的效果如下:

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

css;">flex-grow: 1; // 表示容器在主轴的宽度有多余时该子项占据剩余空间
position:absolute; left: 0;right: 0; top: 0; bottom: 0; // 这一组样式让该元素占满定位的父级元素
上一个:CSS3 transition实现通知消息轮播条代码示例 下一个:CSS3实现左上角或右上角显示提醒圆点代码示例

相关文章

精彩推荐