弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
这东西很方便呀，要分清容量属性和条目属性，想用条目属性之前要在父元素中添加：display：flex。
做了一个简易的菜单栏应用了一下这个模型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒模型</title> <style type="text/css"> body,ul{ margin:0; padding:0; } ul{ list-style:none; } .menu_con{ width:960px; height:80px; background-color:#ddd; margin:50px auto 0; display: flex; } .logo{ width:80px; height:80px; background-color: gold; } .menu{ flex-grow: 1; display:flex; align-items:center; overflow:hidden; } .menu li{ flex-grow:1; border-right:1px solid #333; margin-right:-1px; text-align: center; } .menu li a{ text-decoration: none; color:#666; } @media(max-960px){ .menu_con{ width:100%; } } </style> </head> <body> <div class="menu_con"> <div class="logo"></div> <ul class="menu"> <li><a href="#">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> </ul> </div> </body> </html>
