CSS教程

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

本文主要是介绍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个）子元素，不设置高度或者后面加的子元素不设置高度，不然会出现空白

这篇关于css flex布局多列，两端对齐，justify-content: space-between;换行往左靠拢有效解决办法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航