CSS3中的弹性框布局Flexbox可以实现的效果有哪些?
flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> flex box 弹性布局 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html,body{height:100%;margin:0;}/*需要添加高度控制，否则无法撑满整个屏幕*/
body{
display:-webkit-box;
-webkit-box-orient:vertical;/*按照垂直方向上进行自适应处理*/
}
.content{-webkit-box-flex:1;/*分配剩余的所有空间*/} .header{height:50px;min-width:500px;}/*顶部模块册团握高度定死*/
.logo{width:100px;height:50px;background:#99f;}/*为区分模块，设置了背景色 logo部分固定宽高*/
.nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/
.content{min-height:100px;}/*为防止之后的调整窗口大或陪小是出现影响视觉效果的州庆问题，特设置最小高度*/
.content,.header{display:-webkit-box;/*为content,header部分也添加box的展示模式*/}
.nav{-webkit-box-flex:1;}
.con2{-webkit-box-flex:1;}
.con1{width:200px;background:#f99;}/*固定宽度，高度不定*/
.con2{min-width:200px;background:#999;}/*同上的min-height*/
.con3{width:100px;background:#9f9;}/*固定宽度，高度不定*/
.footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="header">
<div class="logo">logo部分，宽高固定</div>
<div class="nav">nav部分，高度固定，宽度自适应</div>
</div>
<div class="content">
<div class="con1">内容初始化第1模块</div>
<div class="con2">内容初始化第2模块</div>
<div class="con3">内容初始化第3模块</div>
</div>
<div class="footer">底部，宽度不定，高度固定</div>
</body>
</html>
以前用float浮动能做出来的玩意基本上都可以做。关键是Flexbox可以：
可以方便的定义视觉上的先后顺序，如：
<p>123</p>
<p>234</p>
<p>345</p>
浏览器渲染出来：
234 345 123
可以让一大段内容不用添加多余的标皮虚签分割，直接实现竖春握州方向的多列布局
遗憾的是现在玩这个似乎早了扒蔽点。
• 指定如何沿着一系列元素的布局轴（水平轴或垂直轴）宴州拆按比例分配多余空间，从而增加给定元素的大小晌枣。
• 指定如何沿着一系列元素的布局轴将多余空间分配到一系列元素之前、之后或之间。
• 指定如何将垂直于元素布局轴的多余空间分布到该元素的周围，例如，并排布局的按钮上方或下方的多余空间。
• 控制元素在页面上的布局方向—（例如从上到下、从左到右、从右到左或从下到上）。
• 按照不同于文档对象模型 (DOM) 所指定排序方式对屏幕上的元素重新排序。 如果想了解的更多，可以去看看这个教程http://www.tudou.com/programs/view/Y6w4P7_PjQY/"
