<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;/*伸缩项目单行排列*/ } .stable{ width:200px;/*固定宽度*/ border:1px solid #ccc; margin:20px; } .change{ flex:1;/*这里设置为占比1，填充满剩余空间*/ border:1px solid #ff4400; margin:20px; } </style> </head> <body> <div class="parent"> <div class="stable">stable 固定宽度200px</div> <div class="change">changeable 可变宽度</div> </div> </body> </html>
文章来源: flex实现经典两栏布局