讓多個元素貼邊平分佈局

怎樣讓多個元素貼邊平分？

        爲何會有這個疑問呢？首先說明一下，接觸前端有一年的時間了，自認爲對靜態佈局不在話下，果真，自負的人最容易被打臉吶，剛換了一份工做，公司對前端要求比較嚴格。
        公司使用的是bootstrap開發，咱們都知道bootstrap框架最核心的是它的柵格系統，我固然也很喜歡這個啦，不過最近UI給個人設計圖老是和bootstrap相矛盾，就比如說，有個模塊須要每個元素在移動端和屏幕之間有固定的間距，可是在響應到pc端時，要在有效寬度內貼邊對齊。這就很扯淡啦。我畫個圖表示一下心裏的狂躁......

        就是實現下面這種結果，看着真的沒什麼難度，不過由於我是用bs的柵格來佈局的，因此須要修改bs的padding的值，這種方法不算明智，因此我思考和彙總了幾種實現的作法。都是很基礎的。

1.怎樣讓四個沒有內邊距和邊框的元素貼邊平分？

<!--怎樣讓四個沒有內邊距和邊框的元素貼邊平分？-->
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
/*
 * 怎樣讓四個沒有內邊距和邊框的元素貼邊平分？
 */
        .box{
            width: 1170px;
            margin: 30px auto 0;
            border:1px solid #00a09d;
            font-size: 0;
        }
        .box>div{
            display: inline-block;
            font-size: 16px;
            width:23.5%;
            height: 100px;
            background: #ddd;
            text-align: center;
        }
        .box>div:nth-child(n+2){
            margin-left:2%;
        }

這個是最基礎的，也是最簡單的，沒什麼好說的了，使用最簡單的平分寬度實現。效果圖：

2.怎樣讓四個有內邊距和邊框的元素貼邊平分？

        這個就有意思了，每次在開發過程當中，只要設置width+padding+border，問題就接踵而來了。不是元素被擠到下一行，就是這一行的寬度沒有平分完。因此我使用了下面的幾種方法。
        先設置基礎樣式：

<!--怎樣讓四個有內邊距和邊框的元素貼邊平分？-->
        <div class="div-box div-box1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
/*
* 怎樣讓四個有沒有內邊距和邊框的元素貼邊平分？
 */
    /*基礎樣式*/
    .div-box{
        width: 1170px;
        margin: 30px auto 0;
        border: 1px solid #000;
    }
    .div-box div{
        width: 150px;
        height: 150px;
        background: #ddd;
        padding: 15px;
        border: 1px solid #000;
        text-align: center;
    }

居中方式一 : 怪異盒模型+平分寬度

/*居中方式一:怪異盒模型+平分寬度*/
            .div-box1 div{
                box-sizing: border-box;
            }
            .div-box1{
                font-size: 0;
            }
            .div-box1 div{
                display: inline-block;
                font-size: 16px;
                width: 23.5%;
            }
            .div-box1 div:nth-child(n+2){
                margin-left:2%;
            }

居中方式二:浮動+怪異盒模型+平分寬度

/*居中方式二:浮動+怪異盒模型+平分寬度*/
            .div-box2::after{
                content: "";
                display: block;
                clear: both;
            }
            .div-box2 div{
                box-sizing: border-box;
                float: left;
                width: 23.5%;
            }
            .div-box2 div:nth-child(n+2){
                margin-left:2%;
            }

居中方式三:彈性盒子（用這個最好啦）

/*居中方式三:彈性盒子（用這個最好啦）*/
        .div-box3{    
            display: flex;
            /*flex-direction:row;  //子元素的排列方向，默認是row  */  
            /*flex-wrap:nowrap;    //子元素超出父級後是否換行，默認不換行，設置的寬度會失效  */  
            /*flex-flow:row nowrap //上面兩個屬性的複合寫法  */
            /*子元素在父元素上的對其方式:flex-start前對齊||flex-end後對齊||center居中對齊||space-between和邊緣無間距對齊||space-around和邊緣有間距對齊*/
                justify-content: space-between;  
            }
            .div-box3>div{
                width: 23%;
            }
            .div-box3>div:nth-child(n+2){
                margin-left: 2%;
            }

居中方式四:寬度屬性計算（不提倡，兼容性很差）

/*居中方式四:寬度屬性計算（不提倡，兼容性很差）*/
            .div-box4{
                font-size: 0;
            }
            .div-box4>div{
                display: inline-block;
                font-size: 16px;
                width: calc(23.5% - 32px); /*數學符號之間必定要有空格*/
            }
            .div-box4>div:nth-child(n+2){
                margin-left: 2%;
            }

以上四種方式實現的效果都是這樣的：

---

最後，只有掌握最基礎最底層的技術，才能在開發過程當中更高效地完成任務。勤勞能致富，後面我要更努力去思考更有用的知識。：)