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個)子元素,不設置高度或者后面加的子元素不設置高度,不然會出現空白


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM