首页 > 代码库 > css3的flex布局
css3的flex布局
今天看到百度前端学院有关于flex布局方面的内容，就看了下flex布局，顺便做下总结，方便自己以后看。内容大概分几个方面，一、flex布局的好处以及应用场景；二、原理；三、基本内容；四、demo；
一、flex布局的好处以及应用场景：
flex好处就是灵活方便，大多应用在移动端，pc端由于兼容问题应用不太广泛。
二、原理：
说到原理说神马呢？先说下常见的布局吧：一、固定布局：就是宽高都固定的那种，width:500px;height:100px;二、流体式布局：width:100%;height:10%；移动端用rem；
三、弹性布局：就是flex布局；四：position:absolute;float:left;之类的脱离文档流的形式；flex属于弹性布局；弹性布局是 一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
三、基本内容：包括一些基本属性，用法，参考下列网址
https://segmentfault.com/a/1190000002910324
http://www.w3cplus.com/css3/flexbox-basics.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
四、demo：包含了flex一些基本用法；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 background-color: #CCCCCC; 9 padding: 0; 10 margin: 0; 11 } 12 .box1 { 13 background-color: #fff; 14 display: flex; 15 flex-flow: row wrap; 16 } 17 .box2 { 18 background-color: #fff; 19 display: flex; 20 justify-content: space-around; 21 } 22 .box3 { 23 background-color: #fff; 24 display: flex; 25 justify-content: flex-end; 26 } 27 .box4 { 28 background-color: #fff; 29 display: flex; 30 justify-content: space-between; 31 } 32 .box5 { 33 background-color: #fff; 34 display: flex; 35 flex-wrap: wrap; 36 align-items: flex-start; 37 margin: 10px; 38 } 39 .box6 { 40 background-color: #fff; 41 display: flex; 42 flex-flow: row wrap; 43 } 44 .item{ 45 text-align: center; 46 margin: 5px; 47 width: 50px; 48 height: 50px; 49 border-radius: 100%; 50 background-color: #000; 51 color: #fff; 52 } 53 .item2{ 54 text-align: center; 55 margin: 5px; 56 width: 40px; 57 height: 40px; 58 border-radius: 100%; 59 background-color: #000; 60 color: #fff; 61 } 62 .item5{ 63 text-align: center; 64 margin: 5px; 65 width: 40px; 66 height: 40px; 67 border-radius: 100%; 68 background-color: #000; 69 color: #fff; 70 order: 3; 71 } 72 .item6{ 73 text-align: center; 74 margin: 5px; 75 width: 40px; 76 height: 40px; 77 border-radius: 100%; 78 background-color: #000; 79 color: #fff; 80 order: 2; 81 } 82 .item7{ 83 text-align: center; 84 margin: 5px; 85 width: 40px; 86 height: 40px; 87 border-radius: 100%; 88 background-color: #000; 89 color: #fff; 90 order: 1; 91 } 92 .item8{ 93 text-align: center; 94 margin: 5px; 95 width: 40px; 96 height: 40px; 97 border-radius: 100%; 98 background-color: #000; 99 color: #fff; 100 order: 0; 101 } 102 </style> 103 </head> 104 <body> 105 <div class="box1"> 106 display: flex; 107 flex-flow: row wrap; 108 <span class="item">1</span> 109 <span class="item">2</span> 110 <span class="item">3</span> 111 <span class="item">4</span> 112 <span class="item">5</span> 113 <span class="item">6</span> 114 </div> 115 <div class="box2"> 116 justify-content: space-around; 117 <span class="item">1</span> 118 <span class="item">2</span> 119 <span class="item">3</span> 120 <span class="item">4</span> 121 <span class="item">5</span> 122 <span class="item">6</span> 123 </div> 124 <div class="box3"> 125 justify-content: flex-end; 126 <span class="item">1</span> 127 <span class="item">2</span> 128 <span class="item">3</span> 129 <span class="item">4</span> 130 <span class="item">5</span> 131 <span class="item">6</span> 132 </div> 133 <div class="box4">justify-content: space-between; 134 <span class="item">1</span> 135 <span class="item">2</span> 136 <span class="item">3</span> 137 <span class="item">4</span> 138 <span class="item">5</span> 139 <span class="item">6</span> 140 </div> 141 <div class="box5">align-items: flex-start; 142 <span class="item">1</span> 143 <span class="item2">2</span> 144 <span class="item">3</span> 145 <span class="item2">4</span> 146 <span class="item">5</span> 147 <span class="item2">6</span> 148 <span class="item">1</span> 149 <span class="item">2</span> 150 <span class="item2">3</span> 151 <span class="item">4</span> 152 <span class="item">5</span> 153 <span class="item2">6</span> 154 <span class="item">1</span> 155 <span class="item">2</span> 156 <span class="item2">3</span> 157 <span class="item">4</span> 158 <span class="item2">5</span> 159 <span class="item">6</span> 160 <span class="item2">1</span> 161 <span class="item">2</span> 162 <span class="item2">3</span> 163 <span class="item">4</span> 164 <span class="item2">5</span> 165 <span class="item">6</span> 166 <span class="item">1</span> 167 <span class="item">2</span> 168 <span class="item2">3</span> 169 <span class="item2">4</span> 170 <span class="item">5</span> 171 <span class="item">6</span> 172 </div> 173 <div class="box6">order 174 <span class="item5">1</span> 175 <span class="item6">2</span> 176 <span class="item7">3</span> 177 <span class="item8">4</span> 178 </div> 179 </body> 180 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>center</title> 6 <style> 7 body{ 8 padding: 0; 9 margin: 0; 10 } 11 .parent { 12 flex-flow: row wrap; 13 display: flex; 14 height: 100px; 15 } 16 .a { 17 width: 100px; 18 border: 1px solid #FF0000; 19 flex-grow: 1; 20 21 } 22 .b { 23 width: 100px; 24 border: 1px solid #FF0000; 25 flex-grow: 2; 26 27 } 28 .c { 29 width: 100px; 30 border: 1px solid #FF0000; 31 flex-grow: 3; 32 33 } 34 </style> 35 </head> 36 <body> 37 <div class="parent"> 38 <div class="a">1</div> 39 <div class="b">2</div> 40 <div class="c">3</div> 41 </div> 42 </body> 43 </html>
参考内容：
http://blog.csdn.net/u010297791/article/details/54945290
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://segmentfault.com/a/1190000002910324
http://www.w3cplus.com/css3/flexbox-basics.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://www.cnblogs.com/imwtr/p/4767664.html
css3的flex布局