雙飛翼布局_flex方式 · 學海無涯_究其本質_李東旭

>[danger]什么是雙飛翼布局? 1. 先看效果圖如下: (兩邊固定寬度, 中間自適應的形式) ![](https://box.kancloud.cn/1c90f6a1169e35995af451b8dbcca26a_810x353.png) 2. 設計思路: 利用flex彈性布局, 左右固定寬度, 中間div設置flex: 1; 即可實現 3. 代碼如下: ``` <style> *{ margin: 0; } .wrap { display: flex; } .left_div, .main_div, .right_div { height: 130px; color: white; } .left_div { width: 200px; background: red; } .main_div { flex: 1; min-height: 130px; background: green; } .right_div { width: 200px; background: blue; } </style> <body> <div class="wrap"> <div class="left_div">左-紅色Div</div> <div class="main_div">我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊我是內容啊</div> <div class="right_div">右-藍色Div</div> </div> </body> ```