css 把一行一列改为多行多列,css 实现多行多列的效果？

我想实现一个商品列表的效果。子元素多行多列，而且子元素左右两边对齐。用css3的flex布局如何实现？

我做了一个小例子代码如下：

*{

margin: 0;padding: 0;

}

ul{

display: flex;

flex-wrap: wrap;

justify-content: space-between;

width: 1000px;margin: 0 auto;

list-style-type: none;

border: 1px solid red;

}

li{

width: 30%;

background-color: #eee;

margin: 10px 0;

height: 40px;

}

• 1
• 2
• 3
• 4
• 5

使用了justify-content: space-between这个css3的方法，这样能通过css3自动实现左右两边对齐，每个子元素左右间距也能自动实现。但是如果是最后一行没有占满的话，会出现问题。如图：

5自动在最右侧出现，但是我想要的效果是5应该在2的最下方才对。之前实现都是用比较笨的方法修改父级的宽度，和修改子元素的margin-right来实现。如果用css3的话怎么来实现这种效果呢。