CSS實現(xiàn)多個元素在盒子內(nèi)兩端對齊效果

發(fā)布時間：2021-03-22 17:00:00 作者：IronEggs

這篇文章主要介紹了CSS實現(xiàn)多個元素在盒子內(nèi)兩端對齊效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

元素倆端對齊的排列布局在實際的開發(fā)當(dāng)中隨處可見，使用flex布局的--justify-content ： space-between即可輕松實現(xiàn)，但有些場景下需要考慮兼容等問題，不得不放棄flex布局，所以我們想要實現(xiàn)同樣的效果就需要研究排版，在網(wǎng)絡(luò)搜索了一番答案后，發(fā)現(xiàn)真正簡單且實質(zhì)性能夠解決問題的，寥寥無幾，確實我在實際項目中經(jīng)常碰到此類布局，所以我利用業(yè)余時間，將其原理實現(xiàn)分享于此，以供交流，分享

場景要求

在一個確定寬度的盒子內(nèi)，將item倆端對齊排列，且不影響確定盒子的原來布局。

<div class="container">
        <ul>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
            <li>12</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

假設(shè)這里我們有這么些item

* {
        margin: 0;
        padding: 0;
    }
    
    .container {
        width: 1200px;
        height: 500px;
        background-color: aqua;
        margin: 0 auto;
    }
    
    ul {
        /* 關(guān)鍵是元素的寬，通過margin負(fù)值移位與container重疊 */
        width: 1220px;
        margin-left: -20px;
        list-style: none;
    }
    
    ul li {
        float: left;
        /* width = (盒子寬度 - margin間距 * 一行items的個數(shù) - 1) /  一行item的個數(shù) */
        /* (1200px - 20 * 2) / 3 */
        width: 386.666px;
        height: 60px;
        margin: 0px 0 20px 20px;
        background-color: red;
    }

css關(guān)鍵在于需要我們計算下item的寬度，/* width = (盒子寬度 - margin間距 * 一行items的個數(shù) - 1) / 一行item的個數(shù) */ ，這里我打算一行顯示三個item,那么就是(1200px - 20 * 2) / 3，為什么是一行item的個數(shù)-1來計算marign占據(jù)的寬度，三個item不應(yīng)該是三個margin嗎，這就是實現(xiàn)倆端對齊的精髓所在，試想浮動布局，一行元素在流上逐個排列，當(dāng)流方向?qū)挾炔粔驎r，元素則會折行排列，如果想讓齊在一行內(nèi)顯示，我們確實可以通過給第三個item的margin值設(shè)置為0，使其不折行也達到了倆端對齊的顯示方式，這樣做確實沒問題，可一旦item個數(shù)多了，且不確定的時候呢，你怎么取消一行內(nèi)最后一個item的margin,顯然設(shè)置margin為0的方式不是最佳方案，那么此時就可以對他的外包盒子做處理，外部盒子ul(這里我使用的是ul標(biāo)簽，塊標(biāo)簽都可以)的寬度和 -margin值的設(shè)置。