flex
Posted zhaobao1830
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex相关的知识，希望对你有一定的参考价值。
地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
例子::运行后看效果
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Web的Flex弹性盒模型</title> 6 <style> 7 body{ 8 font-family: ‘微软雅黑‘; 9 /*font-family: cursive, ‘微软雅黑‘;*/ 10 padding: 0; 11 margin: 20px 0 40px; 12 13 font-size: 16px; 14 background-color: #F9F9F9; 15 } 16 h1{ 17 color: #0BF; 18 text-indent: 15px; 19 } 20 h3{ 21 color: #6D7273; 22 text-indent: 15px; 23 padding: 10px 0; 24 background-color: #fff; 25 } 26 p{ 27 margin: 0; 28 padding: 0; 29 color: #666; 30 margin-bottom: 5px; 31 } 32 33 .boxes{ 34 padding: 0 10px; 35 overflow: hidden; 36 display: -webkit-flex; 37 flex-wrap: wrap; 38 align-content:flex-start 39 } 40 .box{ 41 width: 400px; 42 padding: 8px; 43 margin-right: 20px; 44 margin-bottom: 10px; 45 display: inline-block; 46 box-shadow: 2px 2px 3px 1px #E0E0E0; 47 } 48 49 .boxstyle{ 50 padding: 8px 0; 51 } 52 .boxborder{ 53 border: 1px dashed #B6B6B6; 54 } 55 .demo{ 56 color: #fff; 57 display: -webkit-flex; 58 text-align: center; 59 } 60 .demo .item{ 61 line-height: 40px; 62 background-color: #ddd; 63 } 64 .demo .item:nth-child(1){ 65 background-color: #E46C49; 66 } 67 .demo .item:nth-child(2){ 68 background-color: #37B0D3; 69 } 70 .demo .item:nth-child(3){ 71 background-color: #68B33D; 72 } 73 .demo .item:nth-child(4){ 74 background-color: #E46775; 75 } 76 .demo .item:nth-child(5){ 77 background-color: #CFC731; 78 } 79 .demo .item:nth-child(6){ 80 background-color: #8370F4; 81 } 82 83 .demo .item span{ 84 display: block; 85 } 86 87 .demo2 .item{ 88 height: 60px; 89 width: 150px; 90 word-wrap: break-word; 91 line-height: 1.5; 92 } 93 94 .demo-row{ 95 flex-direction: row; 96 } 97 .demo-row-reverse{ 98 flex-direction: row-reverse; 99 } 100 .demo-column{ 101 height: 200px; 102 flex-direction: column; 103 } 104 .demo-column-reverse{ 105 height: 200px; 106 flex-direction: column-reverse; 107 } 108 109 .demo-nowrap{ 110 -webkit-flex-wrap: nowrap; 111 width: 400px; 112 } 113 .demo-wrap{ 114 -webkit-flex-wrap: wrap; 115 width: 400px; 116 } 117 .demo-wrap-reverse{ 118 -webkit-flex-wrap: wrap-reverse; 119 width: 400px; 120 } 121 .demo-align-content{ 122 width: 400px; 123 flex-wrap: wrap; 124 height:200px; 125 border: 1px dashed #B6B6B6; 126 } 127 .demo-align-content .item:nth-child(1), .demo-align-content .item:nth-child(2), .demo-align-content .item:nth-child(3), 128 .demo-align-content .item:nth-child(4), .demo-align-content .item:nth-child(5), .demo-align-content .item:nth-child(6){ 129 background-color: #717171; 130 width: 80px; 131 margin: 2px 10px; 132 } 133 134 </style> 135 </head> 136 <body> 137 <h1>Web的Flex弹性盒模型</h1> 138 <section class="content"> 139 140 <h3>[ flex ]</h3> 141 <div class="boxes"> 142 <div class="box"> 143 <div class="boxstyle"> 144 <p>display: -webkit-flex;</p> 145 </div> 146 <div class="demo demo1"> 147 <div class="item" style="width:100px">width:100px;</div> 148 <div class="item" style="flex:2">flex: 2;</div> 149 <div class="item" style="flex:1">flex: 1;</div> 150 </div> 151 </div> 152 153 <div class="box"> 154 <div class="boxstyle"> 155 <p>display: -webkit-flex; </p> 156 </div> 157 <div class="demo demo2 boxborder"> 158 <div class="item" style="margin-right:10px;"> 159 <span>width:150px;</span> <span>margin-right:10px;</span></div> 160 <div class="item" style="flex:1">flex: 1;</div> 161 <div class="item" style="margin-left:10px;"> 162 <span>width:150px;</span> <span>margin-left:10px;</span></div> 163 </div> 164 </div> 165 </div> 166 167 <h3>[ flex-direction ]</h3> 168 <div class="boxes" style="width:900px"> 169 <div class="box"> 170 <div class="boxstyle"> 171 <p>flex-direction: row; /*default*/</p> 172 <p>display: -webkit-flex;</p> 173 </div> 174 <div class="demo demo-row"> 175 <div class="item" style="flex:1">flex: 1;</div> 176 <div class="item" style="flex:2">flex: 2;</div> 177 <div class="item" style="flex:3">flex: 3;</div> 178 </div> 179 </div> 180 181 <div class="box"> 182 <div class="boxstyle"> 183 <p>flex-direction: row-reverse;</p> 184 <p>display: -webkit-flex; </p> 185 </div> 186 <div class="demo demo-row-reverse"> 187 <div class="item" style="flex:1">flex: 1;</div> 188 <div class="item" style="flex:2">flex: 2;</div> 189 <div class="item" style="flex:3">flex: 3;</div> 190 </div> 191 </div> 192 193 <div class="box"> 194 <div class="boxstyle"> 195 <p>flex-direction: column;</p> 196 <p>display: -webkit-flex; </p> 197 </div> 198 <div class="demo demo-column"> 199 <div class="item" style="flex:1">flex: 1;</div> 200 <div class="item" style="flex:2">flex: 2;</div> 201 <div class="item" style="flex:3">flex: 3;</div> 202 </div> 203 </div> 204 205 <div class="box"> 206 <div class="boxstyle"> 207 <p>flex-direction: column-reverse;</p> 208 <p>display: -webkit-flex; </p> 209 </div> 210 <div class="demo demo-column-reverse"> 211 <div class="item" style="flex:1">flex: 1;</div> 212 <div class="item" style="flex:2">flex: 2;</div> 213 <div class="item" style="flex:3">flex: 3;</div> 214 </div> 215 </div> 216 </div> 217 218 <h3>[ flex-wrap ]</h3> 219 <div class="boxes" style="width:1310px"> 220 <div class="box"> 221 <div class="boxstyle"> 222 <p>-webkit-flex-wrap: nowrap; /* default */</p> 223 <p>display: -webkit-flex; </p> 224 <p>width: 400px</p> 225 </div> 226 <div class="demo demo-nowrap"> 227 <div class="item" style="width: 100px">100px;</div> 228 <div class="item" style="width: 200px">width: 200px;</div> 229 <div class="item" style="width: 300px">width: 300px;</div> 230 </div> 231 </div> 232 <div class="box"> 233 <div class="boxstyle"> 234 <p>-webkit-flex-wrap: wrap</p> 235 <p>display: -webkit-flex; </p> 236 <p>width: 400px</p> 237 </div> 238 <div class="demo demo-wrap boxborder"> 239 <div class="item" style="width: 100px">100px;</div> 240 <div class="item" style="width: 200px">width: 200px;</div> 241 <div class="item" style="width: 300px">width: 300px;</div> 242 </div> 243 </div> 244 <div class="box"> 245 <div class="boxstyle"> 246 <p>-webkit-flex-wrap: wrap-reverse</p> 247 <p>display: -webkit-flex; </p> 248 <p>width: 400px</p> 249 </div> 250 <div class="demo demo-wrap-reverse boxborder"> 251 <div class="item" style="width: 100px">100px;</div> 252 <div class="item" style="width: 200px">width: 200px;</div> 253 <div class="item" style="width: 300px">width: 300px;</div> 254 </div> 255 </div> 256 </div> 257 258 <h3>[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */</h3> 259 260 <h3>[ justify-content ]</h3> 261 <div class="boxes" style="width:1310px;"> 262 <div class="box"> 263 <div class="boxstyle"> 264 <p>/* 效果如同 float:left; */</p> 265 <p>justify-content: flex-start; /* default */</p> 266 <p>display: -webkit-flex;</p> 267 </div> 268 <div class="demo boxborder" style="justify-content: flex-start;"> 269 <div class="item" style="width:100px">width:100px;</div> 270 <div class="item" style="width:100px">width:100px;</div> 271 </div> 272 </div> 273 274 <div class="box"> 275 <div class="boxstyle"> 276 <p><p>/* 效果如同 float:right; */</p></p> 277 <p>justify-content: flex-end;</p> 278 <p>display: -webkit-flex;</p> 279 </div> 280 <div class="demo demo-justify boxborder" style="justify-content: flex-end;"> 281 <div class="item" style="width:100px">width:100px;</div> 282 <div class="item" style="width:100px">width:100px;</div> 283 </div> 284 </div> 285 286 <div class="box"> 287 <div class="boxstyle"> 288 <p>/* 第三代水平居中方案 */</p> 289 <p>justify-content: center;</p> 290 <p>display: -webkit-flex;</p> 291 </div> 292 <div class="demo demo-justify-end boxborder" style="justify-content: center;"> 293 <div class="item" style="width:100px">width:100px;</div> 294 <div class="item" style="width:100px">width:100px;</div> 295 </div> 296 </div> 297 298 <div class="box"> 299 <div class="boxstyle"> 300 <p>justify-content: space-between; </p> 301 <p>display: -webkit-flex;</p> 302 </div> 303 <div class="demo demo-justify boxborder" style="justify-content: space-between;"> 304 <div class="item" style="width:100px">width:100px;</div> 305 <div class="item" style="width:100px">width:100px;</div> 306 </div> 307 </div> 308 309 <div class="box"> 310 <div class="boxstyle"> 311 <p>justify-content: space-around; </p> 312 <p>display: -webkit-flex;</p> 313 </div> 314 <div class="demo demo-justify-end boxborder" style="justify-content: space-around;"> 315 <div class="item" style="width:100px">width:100px;</div> 316 <div class="item" style="width:100px">width:100px;</div> 317 </div> 318 </div> 319 </div> 320 321 <h3>[ align-self ]</h3> 322 <div class="boxes"> 323 <div class="box" style="width:1000px;"> 324 <div class="boxstyle"> 325 <p>display: -webkit-flex;</p> 326 </div> 327 <div class="demo boxborder" style="width: 1000px; height:200px;"> 328 <div class="item" style="width:200px; align-self:flex-start;">align-self:flex-start;</div> 329 <div class="item" style="width:200px; align-self:flex-end;">align-self:flex-end;</div> 330 <div class="item" style="width:200px; align-self:center;">align-self:center;</div> 331 <div class="item" style="width:200px; align-self:auto;"> 332 <span>align-self:auto;</span> 333 <span>/*default */</span> 334 </div> 335 336 <div class="item" style="width:200px; align-self:baseline;">align-self:baseline;</div> 337 <div class="item" style="width:200px; align-self:stretch;">align-self:stretch;</div> 338 </div> 339 </div> 340 </div> 341 342 <h3>[ align-items ]</h3> 343 <div class="boxes"> 344 <div class="box"> 345 <div class="boxstyle"> 346 <p>align-items: flex-start; /* default */</p> 347 <p>display: -webkit-flex;</p> 348 </div> 349 <div class="demo boxborder" style="align-items: flex-start;height:200px;"> 350 <div class="item" style="width:100px">width:100px;</div> 351 <div class="item" style="width:100px">width:100px;</div> 352 </div> 353 </div> 354 355 <div class="box"> 356 <div class="boxstyle"> 357 <p>align-items: flex-end; </p> 358 <p>display: -webkit-flex;</p> 359 </div> 360 <div class="demo boxborder" style="align-items: flex-end;height:200px;"> 361 <div class="item" style="width:100px">width:100px;</div> 362 <div class="item" style="width:100px">width:100px;</div> 363 </div> 364 </div> 365 366 <div class="box"> 367 <div class="boxstyle"> 368 <p>/* 第三代垂直居中 */</p> 369 <p>align-items: center; </p> 370 <p>display: -webkit-flex;</p> 371 </div> 372 <div class="demo boxborder" style="align-items: center;height:200px;"> 373 <div class="item" style="width:100px">width:100px;</div> 374 <div class="item" style="width:100px">width:100px;</div> 375 </div> 376 </div> 377 378 <div class="box"> 379 <div class="boxstyle"> 380 <p>align-items: baseline; </p> 381 <p>display: -webkit-flex;</p> 382 </div> 383 <div class="demo boxborder" style="align-items: baseline;height:200px;"> 384 <div class="item" style="width:100px">width:100px;</div> 385 <div class="item" style="width:100px">width:100px;</div> 386 </div> 387 </div> 388 389 <div class="box"> 390 <div class="boxstyle"> 391 <p>align-items: stretch; </p> 392 <p>display: -webkit-flex;</p> 393 </div> 394 <div class="demo boxborder" style="align-items: stretch;height:200px;"> 395 <div class="item" style="width:100px; height:100px;">height:100px;</div> 396 <div class="item" style="width:150px; min-height:20px;">min-height:20px;</div> 397 <div class="item" style="width:150px; max-height:60px;">max-height:60px;</div> 398 </div> 399 </div> 400 </div> 401 402 403 <h3>[ align-content ]</h3> 404 <div class="boxes"> 405 <div class="box"> 406 <div class="boxstyle"> 407 <p>/* <span style="color:red"> 对比 align-items</span>*/</p> 408 <p>align-items: flex-start</p> 409 <p>display: -webkit-flex;</p> 410 </div> 411 <div class="demo demo-align-content" style="align-items: flex-start"> 412 <div class="item" >a</div> 413 <div class="item" >b</div> 414 <div class="item" >c</div> 415 <div class="item" >d</div> 416 <div class="item" >e</div> 417 <div class="item" >f</div> 418 419 </div> 420 </div> 421 422 <div class="box"> 423 <div class="boxstyle"> 424 <p>align-content: flex-start; </p> 425 <p>display: -webkit-flex;</p> 426 </div> 427 <div class="demo demo-align-content" style="align-content: flex-start;"> 428 <div class="item" >a</div> 429 <div class="item" >b</div> 430 <div class="item" >c</div> 431 <div class="item" >d</div> 432 <div class="item" >e</div> 433 <div class="item" >f</div> 434 435 </div> 436 </div> 437 438 <div class="box"> 439 <div class="boxstyle"> 440 <p>align-content: flex-end; </p> 441 <p>display: -webkit-flex;</p> 442 </div> 443 <div class="demo demo-align-content" style="align-content: flex-end;"> 444 <div class="item" >a</div> 445 <div class="item" >b</div> 446 <div class="item" >c</div> 447 <div class="item" >d</div> 448 <div class="item" >e</div> 449 <div class="item" >f</div> 450 451 </div> 452 </div> 453 <div class="box"> 454 <div class="boxstyle"> 455 <p>align-content: center; </p> 456 <p>display: -webkit-flex;</p> 457 </div> 458 <div class="demo demo-align-content" style="align-content: center;"> 459 <div class="item" >a</div> 460 <div class="item" >b</div> 461 <div class="item" >c</div> 462 <div class="item" >d</div> 463 <div class="item" >e</div> 464 <div class="item" >f</div> 465 466 </div> 467 </div> 468 <div class="box"> 469 <div class="boxstyle"> 470 <p>align-content: space-between; </p> 471 <p>display: -webkit-flex;</p> 472 </div> 473 <div class="demo demo-align-content" style="align-content: space-between;"> 474 <div class="item" >a</div> 475 <div class="item" >b</div> 476 <div class="item" >c</div> 477 <div class="item" >d</div> 478 <div class="item" >e</div> 479 <div class="item" >f</div> 480 </div> 481 </div> 482 <div class="box"> 483 <div class="boxstyle"> 484 <p>align-content: space-around; </p> 485 <p>display: -webkit-flex;</p> 486 </div> 487 <div class="demo demo-align-content" style="align-content: space-around;"> 488 <div class="item" >a</div> 489 <div class="item" >b</div> 490 <div class="item" >c</div> 491 <div class="item" >d</div> 492 <div class="item" >e</div> 493 <div class="item" >f</div> 494 495 </div> 496 </div> 497 498 <div class="box"> 499 <div class="boxstyle"> 500 <p>align-content: stretch; /*default*/ </p> 501 <p>display: -webkit-flex;</p> 502 </div> 503 <div class="demo demo-align-content" style="align-content: stretch;"> 504 <div class="item" >a</div> 505 <div class="item" >b</div> 506 <div class="item" >c</div> 507 <div class="item" >d</div> 508 <div class="item" >e</div> 509 <div class="item" >f</div> 510 511 </div> 512 </div> 513 514 </div> 515 516 <h3>[ order ]</h3> 517 <div class="boxes"> 518 <div class="box" style="width:1000px;"> 519 <div class="boxstyle"> 520 <p>display: -webkit-flex;</p> 521 </div> 522 <div class="demo demo-align-content" style="width: 1000px;height:40px;"> 523 <div class="item" >a</div> 524 <div class="item" >b</div> 525 <div class="item" >c</div> 526 <div class="item" style="order:-1; width:120px"> d (order:-1) </div> 527 <div class="item" >e</div> 528 <div class="item" >f</div> 529 </div> 530 </div> 531 </div> 532 533 </section> 534 535 536 </body> 537 </html>
以上是关于flex的主要内容，如果未能解决你的问题，请参考以下文章