html" title=flex>flex_0">弹性布局多列换行居左布局,html" title=flex>flex布局下两端对齐，不满左对齐
问题情境：
在html" title=flex>flex布局下，多行排列，如何让html" title=flex>flex布局最后一行没有排满时，向左对齐排列且与上面的行间距相同。
实现效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
li {
list-style: none;
}
.List {
width: 100%;
box-sizing: border-box;
display: html" title=flex>flex;
justify-content: space-between;
html" title=flex>flex-wrap: wrap;
padding: 10px;
}
.List:after{
content: "";
html" title=flex>flex: auto;
}
.item {
/* 宽度是固定好的 */
width: 220px;
height: 60px;
background-color: azure;
margin-bottom: 10px;
border: 1px solid red;
/*这个数值需要自己去调*/
margin-right: 17px;
}
.item:nth-child(5n){
/* 尽量让item在list中居中，两边都没有margin */
margin-right: 0;
}
</style>
<body>
<div id="" style="width: 1200px;margin: auto;background-color: #cccccc;height: 500px;">
<ul class="List">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</body>
</html>
重要代码：要加after以及每个item的margin-right
.List:after{
content: "";
html" title=flex>flex: auto;
}
