布局的传统解决方案，基于盒状模型，依赖 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; /*元素由垂直排列变成了水平排列。这是因为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="#">Homea>li> 29 <li><a href="#">Newsa>li> 30 <li><a href="#">Contacta>li> 31 <li><a href="#">Abouta>li> 32 ul> 33 nav> 34 body> 35 html> 36
效果如下：
早期时候我们做网站布局的使用表格(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; }
输出结果:
