布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
需要安卓4.4及以上版本可以使用display:-webkit-flex;，安卓4.4以下使用display:-webkit-box;
现在大部分浏览器都支持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; }
输出结果:
原文：https://www.cnblogs.com/jing-tian/p/10984447.html