双飞翼布局_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> ```