CSS Flexible Box Layout
CSS Flexible Box Layout 是一直比较新的布局方式，现在支持比较好的浏览器是firefox，chrome。所以下面的例子只可以在firefox，chrome下面运行才可以看到效果。
Flexbox 为 display 属性赋予了一个新的值（即 box 值），还为我们提供了 8 个新的属性：
box-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
常用 Flexbox 样式属性
用于框的样式
display: box
该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。
box-orient
值：horizontal | vertical | inherit
框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。
box-pack
值：start | end | center | justify
设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。
box-align
值：start | end | center | baseline | stretch
基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。
用于框的子代的样式
box-flex
值：0 | 任意整数
该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0，也就是不具有弹性。
上面的 box-flex-group、box-ordinal-group、box-direction 和 box-lines 属性我就不介绍了，因为老实说，您的大部分 Flexbox 作品都未必会用到这些。
下面是做实验的一个小例子，用flex box layout
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
* {
border: none;
margin: 0;
padding: 0;
}
h1 {
font: bold 20px Tahoma;
}
h2 {
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup {
display: block;
}
body {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center; /*设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。*/
-webkit-box-align: center;
}
#wrapper {
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box; /*可将此元素及其直系子代加入弹性框模型中式显示*/
-webkit-box-orient: vertical; /*框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。*/
-webkit-box-flex: 1; /*该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0，也就是不具有弹性。*/
}
#top_header {
background: yellow;
border: 3px solid black;
padding: 20px;
}
#top_menu {
border: red;
background: #ccc;
color: white;
}
#top_menu li {
list-style: none;
display: inline-block;
padding: 5px;
}
#new_div {
display: -webkit-box;
-webkit-box-orient: horizontal; /*框的子代是如何排列的为水平对齐*/
border: 1px solid #ccc;
background: #C60;
}
.main_section {
border: 1px solid blue;
-webkit-box-flex: 1; /*让当前div和子元素可伸缩*/
margin: 20px;
padding: 20px
}
#side_news {
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66cccc;
}
#footer {
text-align: center;
padding: 20px;
border-top: 2px solid green
}
</style>
<body>
<div id="wrapper">
<header id="top_header">
<div id="logo"> </div>
<h1>Welcome to this site!</h1>
</header>
<nav id="top_menu">
<ul>
<li><a href="#">Index</a></li>
<li><a href="#">Doc</a></li>
<li><a herf="#">About</a></li>
</ul>
</nav>
<div id="new_div">
<article class="main_section">
<header>
<hgroup>
<h1>Article title</h1>
<h2>Sub title of article</h2>
</hgroup>
</header>
<p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p>
<footer> written by robter; </footer>
</article>
<article class="main_section">
<header>
<hgroup>
<h1>Article title 2</h1>
<h2>Sub title of article2</h2>
</hgroup>
</header>
<p>This article is mainly used to introcuce html5 programmer.It's very userful to a new coder;</p>
<footer> written by robter; </footer>
</article>
<aside id="side_news">
<h4>News</h4>
<p> Ncik buy a new dog;He love it very much; </p>
</aside>
</div>
<footer id="footer"> <span>Copyright 2012-8 [email protected]</span> </footer>
</div>
</body>
</html>