我们知道，标准流中的，父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局，就可以使子元素们在不脱离标准流的情况下，水平方向上，从左至右排列
flex 布局的优势
1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
2、flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
但flex 的缺点在于，它不支持低版本的 IE 浏览器。
我们来明确几个概念
弹性盒子
弹性盒子指的是使用 display:flex 或 display:inline-flex 声明的父容器。
子元素/弹性元素
子元素/弹性元素指的是父容器里面的子元素们（父元素是弹性盒子）。
使用 display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。我们一般使用display:flex。
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：
flex-direction这个属性默认子元素从左到右排列的。
子盒子如何在父盒子里面水平对齐方式如下所示，
子盒子如何在父盒子里面垂直对齐（单行），如下所示
flex-wrap控制是否换行，如下
flex-flow是flex-direction、flex-wrap的简写形式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex，并且设置排列方式为横向排列flex-direction:row并且设置换行，flex-wrap:wrap这样这个属性的设置才会起作用。
html中伸缩菜单，靠当独的一个html或者是css做不出来的，一般是结合jQ或者是js来实现，这里我就用JS来举例吧，主要是做好一个目录，一般是用ul、li去布局好就行，然后在给一个id，在通过Js去获取对象，然后设置鼠标的hover事件就可以了，这里我提交代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁实用的二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,html{padding:0margin:0text-align:centerfont:normal 14px 'arial'}
#mainNavBar{width:100%background:#999padding:10px 0}
#nav{width:760pxheight:30pxmargin:0 auto}
#nav ul{padding:0margin:0}
#nav ul li{position:relativefloat:leftwidth:60pxheight:30pxline-height:30pxoverflow:hiddenlist-style-type:none}
#nav ul li a{display:blockcolor:#ffftext-decoration:none}
#nav ul li a:hover{font-weight:boldbackground:#666}
#subNav{position:absolutewidth:150pxtop:30pxleft:0pxpadding:5pxbackground:#666color:#ffftext-align:left}
#subNav a{text-decoration:nonefont-weight:normaldisplay:block}
#subNav a:hover{color:#f00background:#f00}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="mainNavBar">
<div id="nav">
<ul>
<li>
<a href="#">Add</a>
<div id="subNav">
<a href="#">写日志</a>
<a href="#">增加分类</a>
</div>
</li>
<li>
<a href="#">Edit</a>
<div id="subNav">
<a href="#">修改分类</a>
<a href="#">文章编辑</a>
</div>
</li>
<li>
<a href="#">Admin</a>
<div id="subNav">
<a href="#">文章管理</a>
<a href="#">评论管理</a>
<a href="#">留言管理</a>
<a href="#">退出</a>
</div>
</li>
</ul>
</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li")
for(i=0i<nav.lengthi++){
nav[i].onmouseover=function(){
this.style.fontWeight="bold"
this.style.overflow="visible"
this.style.background="#666666"
}
nav[i].onmouseout=function(){
this.style.fontWeight="normal"
this.style.background="#999999"
this.style.overflow="hidden"
}
}
</script>
</body>
</html>
#header #shousuo{
width:950px
height:50px
background:#f4f4f4
margin-top:10px
}
#shousuo ul li{
line-height:50px
list-style-type:none
float:left
margin-left:5px
font-weight:bold
font-size:14px
