css弹性盒子学习
css3弹性盒子是一种布局方式，在适应不同的屏幕大小的时候，能够确保元素拥有更恰当的排布行为。它只是视觉呈现上的，即显示顺序适应显示空间，与源代码无关，源代码顺序不受影响。
定义一个弹性盒子：
在css中，设置display：
display：flex；/-webkit-flex;
或者 display：inline-flex;
在弹性容器上无效的属性：
多栏布局模块的 column-*属性；
float与clear对弹性项目无效，使用float使元素的display属性为block;
vertical-align对弹性项目的对齐无效。
例子：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>
弹性盒子test
</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body{
width:80%;
margin:0 auto;
font:12px Helvetica;
background:#999999;
}
.box{
margin:0px;
min-height:400px;
display:flex; //创建flex容器，对IE10：display:-ms-flexbox;老版本语法：-webkit-box/-moz-box;
flex-direction:row;
display:-webkit-flex;
-webkit-flex-direction:row;
flex-wrap:nowrap;
justify-content:center;//设置弹性项目与弹性容器主轴的对齐方式。
align-items:center;//侧轴对齐方式。
align-content:center;//堆栈伸缩行
}
.box > div{
margin:5px;
padding:5px;
min-height:60px;
min-height:60px;
border:1px solid red;
border-radius:15px;
background:yellow;
-webkit-flex: 1 6 20%; //项目放大比例、项目缩小比例、在分配多余空间之前，项目占据的主轴空间。
flex:1 6 20%;
}
header,footer{
display:block;
margin:4px;
padding:5px;
min-height:100px;
background:#777777;
}
@media all and (max-width:640px){
.box {
-webkit-flex-flow:column;
flex-flow:column;
}
.box>div{
min-height:50px;
max-height:50px;
}
}
</style>
</head>
<body>
<header>弹性盒子实验</header>
<div class="box">
<div class="a">1弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
<div class="e">5</div>
<div class="f">6</div>
</div>
<footer>footer</footer>
</body>
</html>
弹性盒子解决了内容难以控制，源码顺序依赖，内容居中等问题，能够实现更好的布局。
