如题：高度已知，左右栏宽度300px，中间自适应：
弹性盒子本身就是并排的，我们设置宽度即可。
用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数内质网有几层膜值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>三栏布局</title></head><style type="text/css"> html*{ margin: 0; padding: 0; }教育部为教师减负 .container{ display: flex; } .left{ backgroun普陀旅游d-color: aqua; width: 300px; height: 100px; } .center{ height: 100px; flex: 1; background: #f296ff; } .right{ height: 100px; bmean的形容词ackground-color: #6ee28d; width: 300px; }</style><body><!-- 已知高度，写出三栏布局，左右宽度300px，中间自适应--><div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div></div></body></html>效果如图：
到此这篇关于css3弹性盒子flex实现三栏布局的实现的文章就介绍到这了,更多相关css3 flex三栏布局内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持短歌行朗诵www.887551.com！
本文发布于:2023-04-07 14:50:11，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e15c66ef251d9895bf8149643ab3a77e.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css3弹性盒子flex实现三栏布局的实现.doc
本文 PDF 下载地址：css3弹性盒子flex实现三栏布局的实现.pdf
| 留言与评论（共有 0 条评论） |
