弹性布局换行靠左对齐

弹性布局的换行靠左对齐有多种解决方法。其中一种方法是使用伪类选择器和计算属性来设置最后一行元素的间距。你可以在CSS中使用以下代码来实现：

.flex div:last-child:nth-child(5n+2) {
  margin-right: calc((100% - 120px) / 4 * 3);
}

.flex div:last-child:nth-child(5n+3) {
  margin-right: calc((100% - 120px) / 4 * 2);
}

.flex div:last-child:nth-child(5n+4) {
  margin-right: calc((100% - 120px) / 4 * 1);
}

这段代码将最后一行中的元素分别对应到第2列、第3列和第4列，并通过计算属性来设置它们的右边距，以实现左对齐的效果。你可以根据实际需求调整元素数量和列数。
另外，你也可以使用网格布局来实现弹性布局的换行靠左对齐。可以在CSS中使用以下代码：

.flex {
  display: grid;
  justify-content: space-around;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-gap: 20px;
}

这段代码使用了网格布局，并通过设置`grid-template-columns`来实现自动换行，并将元素靠左对齐。你可以根据实际需求调整元素的宽度和间距。
以上两种方法都可以实现弹性布局的换行靠左对齐效果，你可以根据具体情况选择适合的方法来使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法](https://download.csdn.net/download/zihan0321/13125745)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [弹性布局换行左对齐(justify-content: space-between)](https://blog.csdn.net/weixin_52923266/article/details/128354844)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]