使用flex布局(多行,一行三个),换行后最后一行左右对齐问题
<html><head><style>html,body,ul {margin: 0;padding: 0;}ul {width: 100%;display: flex;flex-wrap: wrap;/* justify-content: space-between; */}li {width: 33%;background: #ededee;margin-top: 1rem;list-style: none;}ul:after {content: "";width: 30%;height: 0px;visibility: hidden;}</style></head><body><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></body></html>
主要代码:父:复制代码ul {width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;}复制代码子:li {width: 33%;}
效果: