flex实现经典的双飞翼布局

2025-05-16 18:50:21

1、新建页面,添加三个div标签,第一个div是页面的主体部分,包含重要内容,希望优先渲染。

flex实现经典的双飞翼布局flex实现经典的双飞翼布局

4、此时可以看到main div、left div和right div依次排列。拉大浏览器可以看到,main div随着浏览器拉大而放大,left div和right div大小不变。

flex实现经典的双飞翼布局

6、最终得到的就是利用flex实现的经典的双飞翼布局。main div自适应,两侧固定宽度,并且优先渲染main div。

flex实现经典的双飞翼布局
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢