css3弹性盒子flex实现三栏布局的实现
(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )
如题:高度已知,左右栏宽度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 按钮边框动画的实现