任务十的源代码，其实有github的，但就是不知道怎么弄，近期会学会的。在IE和firefox上检测运行良好。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>six</title> <link rel="stylesheet" href="./six.css"> <style> body{ margin: 0; padding: 0; } ul { margin: 0; padding: 0; } li{ list-style: none; } .flex-container { display: flex; align-items:center; flex-flow: row wrap; justify-content: space-between; padding: 20px; } .flex-item { width: 150px; height: 120px; border: solid 1px #f00; margin: 20px 0px; } .flex-item1 { width: 150px; height: 100px; border: solid 1px #f00; margin: 20px 0px; } .flex-item2 { width: 150px; height: 40px; border: solid 1px #f00; margin: 20px 0px; } .flex-item3 { width: 150px; height: 200px; border: solid 1px #0f0; margin: 20px 0px; } @media all and (max- 640px) { .flex-item3{order:0;} .flex-item2{order:3;} .flex-item1{order:2;} .flex-item{order:1;} .flex-container { display: flex; align-items:flex-start; flex-flow: row wrap; justify-content: space-between; padding: 20px; } } </style> </head> <body> <ul class="flex-container"> <li class="flex-item"> </li> <li class="flex-item1">2</li> <li class="flex-item2">3</li> <li class="flex-item3">4</li> </ul> </body> </html>