标签：port 默认 pad 文献 div 技术分享 footer 技术 yellow
一.参考文献：
1.Flex 布局教程：语法篇(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
2.Flex 布局教程：实例篇(http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
二.圣杯布局中用到的属性：
1.盒子属性：
(1).flex-direction：用于确定元素的排列顺序
(a).row(默认值)：元素以水平方向，从左至右排列。
(b).row-reverse：元素以水平方向，从右至左排列。
(c).column：元素以垂直方向，从上至下排列。
(d).column-reverse：元素以垂直方向，从下至上排列。
2.元素属性：
(1).flex-grow：元素的放大比例。（默认0）如果全部元素的值都为1，那么将均分剩余空间；如果一个元素的值为2，其他元素的值都为1，那么这个元素所占的剩余空间比其他元素多一倍。
(2).flex-shrink：元素的缩小比例。（默认1）当剩余空间小于元素空间，那么元素会被缩小。设置为0时，表示元素不会被缩小。
(3).flex-basis：在分配剩余控件之前，元素占据主轴的空间。（默认auto）类似和width、height属性一样设置值。
(4).flex：flex-grow、flex-shrink、flex-basis的简写属性，推荐使用简写属性。顺序依次是flex-grow flex-shrink flex-basis。例如：flex:0 0 100px，即元素不被放大和缩小，主轴空间为100像素。
(5).order：元素的排序序号，类似z-index。数值越大，越靠后。（默认0）
三.总结：
flex布局的优点在于很轻松的能完成元素的对齐（垂直居中也变得轻而易举）、多栏的布局（等分或固定长度）。在用flex模仿圣杯布局时，只使用了很少的几个属性，就达到了以往复杂的float的布局效果。
四.界面截图：
五.代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 margin: 0px; 12 padding: 0px; 13 } 14 15 ul { 16 list-style: none; 17 } 18 19 body { 20 display: flex; 21 flex-direction: column; 22 height: 100vh; 23 min-width: 800px; 24 } 25 26 header, 27 footer { 28 background: deeppink; 29 } 30 31 .container { 32 flex: 1; 33 display: flex; 34 } 35 36 .container>.left { 37 order: -1; 38 flex: 0 0 220px; 39 background: yellowgreen; 40 } 41 42 .container>.main { 43 flex: 1; 44 } 45 46 .container>.right { 47 flex: 0 0 150px; 48 background: yellowgreen; 49 } 50 </style> 51 </head> 52 53 <body> 54 <header>this is header</header> 55 <div class="container"> 56 <main class="main"> 57 this is main content 58 <section> 59 float block 60 </section> 61 </main> 62 <nav class="left"> 63 <ul> 64 <li> 65 <a href="#">link1</a> 66 </li> 67 <li> 68 <a href="#">link2</a> 69 </li> 70 <li> 71 <a href="#">link3</a> 72 </li> 73 <li> 74 <a href="#">link4</a> 75 </li> 76 <li> 77 <a href="#">link5</a> 78 </li> 79 </ul> 80 </nav> 81 <aside class="right"> 82 <ul> 83 <li> 84 <a href="#">link1</a> 85 </li> 86 <li> 87 <a href="#">link2</a> 88 </li> 89 <li> 90 <a href="#">link3</a> 91 </li> 92 <li> 93 <a href="#">link4</a> 94 </li> 95 <li> 96 <a href="#">link5</a> 97 </li> 98 </ul> 99 </aside> 100 </div> 101 <footer> 102 this is footer. 103 </footer> 104 </body> 105 106 </html>
标签：port 默认 pad 文献 div 技术分享 footer 技术 yellow
原文地址：http://www.cnblogs.com/ch11ry/p/7828133.html
