要实现
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 ]
本文介绍了在CSS Flexbox布局中如何实现底部左边对齐的多行布局，包括两种解决方案。第一种利用Flexbox的after伪类元素，但可能在元素数量过多时出现问题。第二种方法推荐使用Grid布局，作为更强大的二维布局方案，尽管存在兼容性问题。
最低0.47元/天 解锁文章
21
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
