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" / titleDocument/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 divg 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" / titleDocument/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 divg