flex實現經典兩欄佈局
阿新 • • 發佈：2019-02-05
<!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>