布局神器：Flexbox

  1 /*
  2 *built by @kevin
  3 *2015/4/2
  4 *for learning flex
  5 *http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html
  6 *http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html
  7 *https://github.com/amfe/lib.flexible相关解决方案
  8  */
  9 
 10 
 11 *{
 12     margin: 0;
 13     padding: 0;
 14 }
 15 
 16 body{
 17     padding: 15px;
 18 }
 19 
 20 .wrap {
 21     font-family: "microsoft yahei";
 22     width: 100%;
 23     margin-bottom: 50px;
 24    display: inline-block;
 25 }
 26 
 27 h3{
 28     text-align: center;
 29     margin-bottom: 20px;
 30     color: #999;
 31 }
 32 
 33 
 34 .demo{
 35     width: 188px;
 36     height: 188px;
 37     background: #f5f5f5;
 38     margin:5px;
 39     float: left;
 40     margin-left: 20px;
 41 
 42     /*flex布局（作用于容器）*/
 43     display: flex;
 44 
 45     /*水平居中（作用于容器）*/
 46     justify-content: center;
 47 
 48     /*垂直居中（作用于容器）*/
 49     align-items: center;
 50 }
 51 
 52 .demo img{
 53     max-width: 150px;
 54     max-height: 150px;
 55     width: auto;
 56     height: auto;
 57 }
 58 
 59 
 60 
 61 
 62 /*水平响应列表*/
 63 
 64 .demo-wrap{
 65     border: 2px solid #ddd;
 66     background: #f7f7f7;
 67     height: 300px;
 68 }
 69 
 70 /*水平响应式列表*/
 71 
 72 .demo1{
 73     width: 100%;
 74     background-color: #333;
 75     /*flex布局（作用于容器）*/
 76     display: flex;
 77  
 78     /*两端对齐（作用于容器）*/
 79     justify-content: space-between;
 80 }
 81 
 82 
 83 /*水平响应式列表底端对齐*/
 84 
 85 .demo2{
 86     width: 100%;
 87     background-color: #f5f5f5;
 88     /*flex布局（作用于容器）*/
 89     display: flex;
 90     /*两端对齐（作用于容器）*/
 91     justify-content: space-around;
 92 
 93     align-items:flex-end;
 94 
 95 }
 96 
 97 
 98 
 99 /*多行响应式布局*/
100 
101 .demo3{
102     width: 100%;
103  
104     /*flex布局（作用于容器）*/
105     display: flex;
106  
107     /*两端对齐（作用于容器）*/
108     justify-content: space-around;
109  
110     /*侧轴方向对齐方式（作用于容器）*/
111     align-items: flex-end;
112  
113     /*换行（作用于容器）*/
114     flex-wrap: wrap;
115 }
116  
117 .demo3 .item{
118     width: 300px;
119     height: 50px;
120     background: #444;
121     margin-bottom: 20px;
122 }
123 
124 /*左固定右自适应等高布局*/
125 
126 .demo4{
127     display: flex;
128     /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
129     /*align-items: stretch;*/
130 }
131 
132 .demo4 .left{
133 
134     /*左边固定宽度，必须设置其最小宽度和最大宽度*/
135     width: 200px;
136     min-width: 200px;
137     max-width: 200px;
138 
139     /*高度自由分配*/
140 
141     height:auto;
142 
143     background-color: #333;
144     color:#fff;
145 
146     /*空白区域分配比例为0（作用于项目）*/
147 
148     flex-grow:0;
149 
150 }
151 
152 .demo4 .right{
153     margin-left: 10px;
154     width:auto;
155     height:200px;
156     background-color: #333;
157     color:#fff;
158     /*空白区域分配比例为1（作用于项目）
159     左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
160     左边成固定的宽度，右边为自适应宽度*/
161     flex-grow: 1;
162 
163 
164 }
165 
166 /*左右固定中间自适应宽度底部对齐布局*/
167 
168 .demo5{
169     display: flex;
170 }
171 
172 .demo5 .left,.demo5 .right{
173     width: 200px;
174     height: auto;
175     max-width: 200px;
176     min-width: 200px;
177     background-color: #333;
178     color:#fff;
179     flex-grow:0;
180 }
181 
182 .demo5 .center{
183     width: auto;
184     height: 200px;
185     background-color: #66cccc;
186     color:#fff;
187     flex-grow:1;
188 
189 }
190 
191 
192 
193  
194  .item{
195     width: 100px;
196     background: #66cccc;
197     color: #C90000;
198     font-size: 20px;
199     text-align: center;
200     line-height: 50px;
201 }
202  
203  .item1{
204     height: 120px;
205 }
206  
207  .item2{
208     height: 50px;
209 }
210  
211  .item3{
212     height: 140px;
213 }
214 
215 .item4{
216     height: 100px;
217 }
218 
219 
220 .demo6{
221     width: 188px;
222     background: #f5f5f5;
223     margin:5px;
224     float: left;
225     margin-left: 20px;
226 
227 }
228 
229 .demo6 img{
230     display: none;
231 }
232 
233 
234 
235 
236 .demo{
237     width: 188px;
238     height: 188px;
239     background: #f5f5f5;
240     margin:5px;
241     float: left;
242     margin-left: 20px;
243 
244     /*flex布局（作用于容器）*/
245     display: flex;
246 
247     /*水平居中（作用于容器）*/
248     justify-content: center;
249 
250     /*垂直居中（作用于容器）*/
251     align-items: center;
252 }
253 
254 .demo img{
255     max-width: 150px;
256     max-height: 150px;
257     width: auto;
258     height: auto;
259 }