元素倆端對齊的排列布局在實(shí)際的開發(fā)當(dāng)中隨處可見，使用flex布局的--justify-content ： space-between即可輕松實(shí)現(xiàn)，但有些場景下需要考慮兼容等問題，不得不放棄flex布局，所以我們想要實(shí)現(xiàn)同樣的效果就需要研究排版，在網(wǎng)絡(luò)搜索了一番答案后，發(fā)現(xiàn)真正簡單且實(shí)質(zhì)性能夠解決問題的，寥寥無幾，確實(shí)我在實(shí)際項(xiàng)目中經(jīng)常碰到此類布局，所以我利用業(yè)余時間，將其原理實(shí)現(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)鍵在于需要我們計(jì)算下item的寬度，/* width = (盒子寬度 - margin間距 * 一行items的個數(shù) - 1) /  一行item的個數(shù) */ ，這里我打算一行顯示三個item,那么就是(1200px - 20 * 2) / 3，為什么是一行item的個數(shù)-1來計(jì)算marign占據(jù)的寬度，三個item不應(yīng)該是三個margin嗎，這就是實(shí)現(xiàn)倆端對齊的精髓所在，試想浮動布局，一行元素在流上逐個排列，當(dāng)流方向?qū)挾炔粔驎r，元素則會折行排列，如果想讓齊在一行內(nèi)顯示，我們確實(shí)可以通過給第三個item的margin值設(shè)置為0，使其不折行也達(dá)到了倆端對齊的顯示方式，這樣做確實(shí)沒問題，可一旦item個數(shù)多了，且不確定的時候呢，你怎么取消一行內(nèi)最后一個item的margin,顯然設(shè)置margin為0的方式不是最佳方案，那么此時就可以對他的外包盒子做處理，外部盒子ul(這里我使用的是ul標(biāo)簽，塊標(biāo)簽都可以)的寬度和 -margin值的設(shè)置。

為什么外部盒子的寬度是1220px

這是container原來的寬度

這是ul的寬度，是的已經(jīng)大過了container,而且是右邊大過去的，那此時將ul用-margin處理后，即可成為視覺上的倆端對齊

取消ul的背景顏色后，效果達(dá)成

總結(jié)

到此這篇關(guān)于CSS實(shí)現(xiàn)多個元素在盒子內(nèi)兩端對齊效果的文章就介紹到這了,更多相關(guān)CSS 元素 盒子 兩端對齊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！