CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼 - honoka(2)_H5之家

#div-middle-02 { float: left; background-color: #fff9ca; width: 100%; height: 50px; } #middle-wrap-02 { margin: 0 200px 0 150px; } #div-left-02 { float: left; position: relative; background-color: red; width: 150px; margin-left: -100%; height: 50px; } #div-right-02 { float: left; position: relative; background-color: yellow; width: 200px; margin-left: -200px; height: 50px; }

双飞翼能够兼容到 IE6，其可以实现的各种布局在此便不作展开了，有兴趣可以参考玉伯分享的 DEMO

4. 跟上潮流，试试 flex

See the Pen flex-three-columns by xal821792703 (@honoka) on CodePen.

看完了强大的双飞翼布局，是不是已经心急火燎地想亲手试试啦。别急，客官，再听我唠唠 CSS3 的新布局 flex 呗。先让我说明一下上面的 DEMO 中是怎样实现本次实例的：

设计一个弹性容器包裹需定位的三个元素，然后将该弹性容器的排列属性设为水平排列（flex-flow: row）

现在三个元素已经是三列布局了，再将三列元素分别设定一下宽度就行了，左右元素设定为定宽，自适应的中间元素设定为 100%。

.flex { display: flex; flex-flow: row; } #div-left-03 { background-color: red; width: 150px; height: 50px; } #div-middle-03 { background-color: #fff9ca; width: 100%; height: 50px; } #div-right-03 { background-color: yellow; width: 200px; height: 50px; }

效果如下图：

Flex 布局教程：语法篇

Flex 布局教程：实例篇

最后感谢大家的阅读，欢迎前往我的 repo 查看源代码整理，有任何问题也请尽情向我吐槽。