css 中 flex 布局最后一行实现左对齐

问题

flex 布局最后一行没有进行左对齐显示：
在这里插入图片描述

<div class='parent'><div class='child'></div><div class='child'></div><div class='child'></div><div class='child'></div><div class='child'></div><div class='child'></div><div class='child'></div><div class='child'></div>
</div><style>.parent{width: 300px;display: flex;flex-wrap: wrap;justify-content: space-between;}.child{width:32%;	height: 95px;background: #fd775a;margin-top: 10px;}
</style>

解决方法

1、行的列数及子元素宽度都固定

给最后一个元素加上右侧的外边距 margin-right，从而实现左对齐的效果

<style>.parent{width: 300px;display: flex;flex-wrap: wrap;justify-content: space-between;}.child{width:32%;	height: 95px;background: #fd775a;margin-top: 10px;}.child:last-child { //定位最后一个元素设置右侧外边距margin-right: calc(32% + 4% / 3); //具体数值根据实际情况填入}
</style>

效果：
在这里插入图片描述

2、子元素宽度不固定

与上一个方法同理，只需要把最后一个元素的 margin-right 设置为 auto 即可

<style>.parent{width: 600px;display: flex;flex-wrap: wrap;justify-content: space-between;}.parent:hover{width: 540px;}.child{height: 95px;background: #fd775a;margin-top: 10px;margin-left: 10px;}.child:last-child {margin-right: auto;}
</style><div class='parent'><div class='child' style="width:50px"></div><div class='child' style="width:130px"></div><div class='child' style="width:100px"></div><div class='child' style="width:150px"></div><div class='child' style="width:80px"></div><div class='child' style="width:110px"></div><div class='child' style="width:90px"></div><div class='child' style="width:60px"></div><div class='child' style="width:200px"></div><div class='child' style="width:60px"></div>
</div>