flex 布局中非常经典的“最后一行对齐“问题。
flex 布局，每行显示4个盒子，最后一行只有2个的时候，它会在最左边和最右边显示，如何解决?
问题原因
当使用 justify-content: space-between 时，最后一行如果元素不满，会把剩余元素分散到两端，看起来很奇怪。
解决方案
改用 justify-content: flex-start + margin 间距
直接上代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { height: 500px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 40px; } .item { width: calc((100% - 120px) / 4); /* (容器宽 - 3个gap) / 4 */ border: 1px solid #ccc; box-sizing: border-box; } </style> </head> <body> <div> <div&g