css flex布局多列,两端对齐,justify-content: space-between;换行往左靠拢有效解决办法

复制代码
<ul class="list">
                        <li>
                            <a class="link" href="#">
                                <img src="./images/1.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>95万</i><span class="icon-play"></span>
                                </div>
                                <p>百万评论热歌全集丨时实更新中</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/2.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>42万</i><span class="icon-play"></span>
                                </div>
                                <p>网易云音乐流行热歌精选</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/3.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>73万</i><span class="icon-play"></span>
                                </div>
                                <p>“其实我也很难过,你为什么不回头看看我”</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/4.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>92876</i><span class="icon-play"></span>
                                </div>
                                <p>【袁娅维】我是一只鱼&我要我们在一起 Acoustic</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/5.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>19万</i><span class="icon-play"></span>
                                </div>
                                <p>在一起叫梦分开了叫痛没做完的梦最痛</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/6.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>1694</i><span class="icon-play"></span>
                                </div>
                                <p>金毛托运中死亡,陈乔恩为其发声</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/7.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>222万</i><span class="icon-play"></span>
                                </div>
                                <p>我字字皆你,你却句句非我</p>
                            </a>
                        </li>
                        <li>
                            <a class="link" href="#">
                                <img src="./images/8.jpg">
                                <div class="msk"></div>
                                <div class="bottom">
                                    <span class="icon-headset"></span><i>42万</i><span class="icon-play"></span>
                                </div>
                                <p>E38. 杂谈 | “困”在互联网大厂的实习生们?</p>
                            </a>
                        </li>
                        <li></li>
                        <li></li>
                    </ul>
.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 689px;
    margin: 20px auto 0;
}

.list li { width: 140px; max-height: 204px; padding-bottom: 30px; }   
复制代码

只需要在后面多加(每一列n个 n-2个)子元素,不设置高度或者后面加的子元素不设置高度,不然会出现空白

posted @   闲时一点  阅读(1582)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示