爱站程序员基地圣杯布局
什么是圣杯布局？
简单的理解就是一行三列盒子 分为左中右，然后左和右边的盒子有个固定的宽度 中间的盒子就可以形成一个宽度自适应的效果。
大概的效果图就是这个亚子：
然后我是用的flex的布局来做的这个效果，原理呢也非常简单。
就是了这个大盒子开启了 flex弹性布局，左右两个盒子给了固定的 宽度 ， 中间这个盒子 给了一个 flex:1; 就可以形成这样的效果了 .
下面代码双手奉上
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>.box {display: flex;width: 100%;height: 60px;background-color: skyblue;text-align: center;line-height: 60px;color: #fff;font-size: 20px;}.box span {width: 100px;}.box span:nth-child(2) {width: 100%;flex: 1;background-color: blue;}</style></head><body><div class=\"box\"><span>左侧</span><span>中间</span><span>右侧</span></div></body></html>
结语
有什么问题可以评论区留言
大家一起加油~~
