怎样让多个元素贴边平分？

        为什么会有这个疑问呢？首先说明一下，接触前端有一年的时间了，自认为对静态布局不在话下，果然，自负的人最容易被打脸呐，刚换了一份工作，公司对前端要求比较严格。

        公司使用的是bootstrap开发，我们都知道bootstrap框架最核心的是它的栅格系统，我当然也很喜欢这个啦，不过最近UI给我的设计图总是和bootstrap相矛盾，就好比说，有个模块需要每一个元素在移动端和屏幕之间有固定的间距，但是在响应到pc端时，要在有效宽度内贴边对齐。这就很扯淡啦。我画个图表示一下内心的狂躁......         就是实现下面这种结果，看着真的没什么难度，不过因为我是用bs的栅格来布局的，所以需要修改bs的padding的值，这种方法不算明智，所以我思考和汇总了几种实现的做法。都是很基础的。

1.怎样让四个没有内边距和边框的元素贴边平分？

            
    
            
     
      1
     
            
     
      2
     
            
     
      3
     
            
     
      4
     
        
    
/* * 怎样让四个没有内边距和边框的元素贴边平分？ */        .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，问题就接踵而来了。不是元素被挤到下一行，就是这一行的宽度没有平分完。所以我使用了下面的几种方法。

        先设置基础样式：

            
    
            
     
      1
     
            
     
      2
     
            
     
      3
     
            
     
      4
     
        
    
/** 怎样让四个有没有内边距和边框的元素贴边平分？ */    /*基础样式*/    .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%;            }

以上四种方式实现的效果都是这样的：

---

最后，只有掌握最基础最底层的技术，才能在开发过程中更高效地完成任务。勤劳能致富，后面我要更努力去思考更有用的知识。：)