css弹性盒子平分第二行左对齐

要实现CSS弹性盒子平分第二行左对齐，你可以使用flex-wrap属性将子元素换行，并使用align-content属性设置交叉轴上的子元素排列方式。具体步骤如下：

1. 给父容器添加display: flex属性，使其成为一个弹性容器。
2. 使用flex-wrap: wrap属性，使子元素在需要换行时进行换行。
3. 使用align-content: flex-start属性，将子元素在交叉轴上左对齐。

下面是一个示例代码，展示如何实现这个效果：

<div class="wrap">
  <div class="box">夙愿</div>
  <div class="box">夙源</div>
  <div class="box">夙远</div>
  <div class="box">夙梦</div>
  <div class="box">夙念</div>
  <div class="box">夙思</div>
</div>

<style>
.wrap {
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.box {
  border: 2px solid yellowgreen;
  flex: 1;
}
</style>

在上面的示例中，父容器.wrap设置了display: flex，使其成为一个弹性容器。然后通过flex-wrap: wrap将子元素.box进行换行。最后，通过align-content: flex-start将子元素在交叉轴上左对齐。

这样，第二行的子元素将会平分，并且左对齐。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS弹性盒子.docx](https://download.csdn.net/download/lion_qop/12201591)[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: 33.333333333333336%"]
- *2* [flex 弹性盒子布局:多行情况下最后一行左对齐](https://blog.csdn.net/weixin_50630898/article/details/129207769)[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: 33.333333333333336%"]
- *3* [CSS弹性盒子布局](https://blog.csdn.net/like896369216/article/details/124108378)[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: 33.333333333333336%"]
[ .reference_list ]