如需要更深入了解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;
}

输出结果: