<!DOCTYPE html> <html> <head> <title>CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)</title> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header,.footer{ border: 1px solid #333; background: purple; color: white; text-align: center; height: 50px; line-height: 50px; } .container { display: flex; } .left,.middle,.right{ background-color: aqua; min-height: 130px; line-height: 130px; border: 1px solid #333; text-align: center; } .left{ flex-basis: 220px; order: 1; } .middle { flex: 1; order: 2; } .right{ flex-basis: 220px; order: 3; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="container"> <div class="middle"> <h4>middle</h4> </div> <div class="left"> <h4>left</h4> </div> <div class="right"> <h4>right</h4> </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
使用浮动实现《CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)》见→https://www.cnblogs.com/runrunrun/p/11506650.html
思考
-如果向类为middle的div添加数个<h4>middle</h4>，left，right的div为什么会与middle同一高度？
//如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。
参考flex的基本概念→https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)
原文：https://www.cnblogs.com/runrunrun/p/11565652.html
