布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
需要安卓4.4及以上版本可以使用display:-webkit-flex;，安卓4.4以下使用display:-webkit-box;
如需要更深入了解flex布局，请参考阮一峰博文——Flex 布局教程：实例篇
现在大部分浏览器都支持flexbox布局方法。react和react-native中几乎全部采用flex来布局。
布局导航菜单：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>flex布局导航菜单</title>
6 <style>
7 body{
8 background: white;
9 font-family: 'Open Sans', sans-serif;
10 }
11 .main ul{
12 list-style: none;
13 display: flex; /*<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row*/
14 }
15 .main li{width:100px;}
16 .main a{
17 text-decoration: none;
18 font-size: 21px;
19 font-weight: 600;
20 color: #00a9d9;
21 }
22 .main a:hover{text-decoration: underline;}
23 </style>
24 </head>
25 <body>
26 <nav class="main">
27 <ul >
28 <li><a href="#">Home</a></li>
29 <li><a href="#">News</a></li>
30 <li><a href="#">Contact</a></li>
31 <li><a href="#">About</a></li>
32 </ul>
33 </nav>
34 </body>
35 </html>
36 <!--
37 flex会让<ul>这个容器成为一个具有flex功能的block-level容器，并且会影响到它的子元素的布局表现。
38 如果想让<ul>成为一个inline元素，可以写成display: inline-flex，这样它仍然具有flex container的效果，同时也表现为一个inline元素，就像<img>一样。
39 当加上display: flex;后，<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row,如果我们添加上flex-direction:column,
40 <li>元素又变为了垂直排列
41 -->
效果如下：
早期时候我们做网站布局的使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。
display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。
此外我还写了一个Flex布局的属性详解的文章详细的介绍了各种属性。
计算一个盒子占用的空间是 content + padding + border + margin
flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度
1.例子
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>登陆</title>
6 <style type="text/css">
7 html{width: 100%;height: 100%;} /*整个页面的居中*/
8 body{
9 width: 100%;
10 height: 100%;
11 display: flex; /*flex弹性布局*/
12 justify-content: center;
13 align-items: center;
14 }
15 #login{
16 width: 300px;
17 height: 300px;
18 border: 1px black solid;
19 display: flex;
20 flex-direction: column; /*元素的排列方向为垂直*/
21 justify-content: center; /*水平居中对齐*/
22 align-items: center; /*垂直居中对齐*/
23 }
24 </style>
25 </head>
26 <body>
27 <div id="login">
28 <h1>登陆</h1>
29 <input type="text"><br>
30 <input type="password"><br>
31 <button>确定</button>
32 </div>
33 </body>
34 </html>
输出结果:
2.例子
一个经典的三栏布局
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS 布局</title>
6 </head>
7 <style>
8 .container{
9 height:200px;
10 width: 200px;
11 display: flex
12 }
13 .left{
14 background-color: red;
15 flex: 1;
16 }
17 .middle{
18 background-color: yellow;
19 flex: 1;
20 }
21 .right{
22 background-color: green;
23 flex: 1;
24 }
25 </style>
26 <body>
27 <div class=container>
28 <div class=left></div>
29 <div class=middle></div>
30 <div class=right></div>
31 </div>
32 </body>
33 </html>
输出结果：
有时我们可能需要两边定宽，中间自适应，那么可以这样写：
.left{
background-color: red;
width: 20px;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
width: 20px;
}
输出结果:
