实际应用中十分常见的布局效果，尤其是在产品展示类型网站。
下面就通过flex弹性布局来实现此功能。
代码实例如下:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!doctype html><html><head><meta charset="utf-8"><title>蚂蚁部落</title><style>* { margin: 0; padding: 0;}ul { list-style: none; display: flex; flex-wrap: wrap; justify-content:space-between; width: 550px; margin:0 auto; background-color:#B4D3F7;}li { width: 120px; height: 120px; background: #F7E8B4; margin:10px 0;}</style></head><body><ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul></body></html> |
代码实现产品贴壁均匀排列的效果，代码比较简单具体参阅相关阅读。