css3弹性盒子flex实现三栏布局的实现
程序员文章站
2022-06-17 20:35:06
如题:高度已知,左右栏宽度300px,中间自适应:弹性盒子本身就是并排的,我们设置宽度即可。用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽...
如题:高度已知,左右栏宽度300px,中间自适应:
弹性盒子本身就是并排的,我们设置宽度即可。
用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>三栏布局</title> </head> <style type="text/css"> html*{ margin: 0; padding: 0; } .container{ display: flex; } .left{ background-color: aqua; width: 300px; height: 100px; } .center{ height: 100px; flex: 1; background: #f296ff; } .right{ height: 100px; background-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三栏布局内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!