浅谈三栏布局

说到常用三栏布局,我觉得有3种
1.绝对定位三栏布局
2.浮动三栏布局
3.弹性盒子三栏布局

接下来用代码效果展示一下这三种布局方式:

1.绝对定位三栏布局

浅谈三栏布局
浅谈三栏布局

2.浮动三栏布局浅谈三栏布局

其实绝对定位三栏布局跟浮动三栏布局原理差不多,都是两侧的区域利用定位体系的特性,脱落了文档流,而中间的一栏因为是一个块级元素,根据自身的特性,因为没有设置宽度,所以默认是auto,宽度会充满整个包含块,从而实现了中间宽度自适应。

3.弹性盒子三栏布局

浅谈三栏布局
使用弹性盒子进行布局,左右定宽,中间自适应只需要设置 flex: 1,flex:1的意思是把弹性盒子里除开左右的宽度外的所有剩余空间都分配给中间从而达到自适应的效果,个人偏向于这种,相对更稳定一点。
说的不对的地方欢迎大佬们指正和补充,谢谢