flex实现经典的双飞翼布局

2024-10-14 21:58:54

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实现经典的双飞翼布局
猜你喜欢