這個CSS問題螢幕前的你是否熟悉，然後懵逼，最後放棄

騰訊課堂NEXT學院發表於2017-12-21

CSS

本文作者：IMWeb·結一原文出處：IMWeb社群 未經同意，禁止轉載

當決定寫這篇博文時候，突然一道閃電從腦海劈過，於是臨時決定將這個熟悉然後到懵逼最後到放棄的問題分為兩部分。

閒話少說，直接上題：

要求如下：

三個橙色圓的大小為60px，固定不變
所有間隙相等，也就是被三個橙色圓劃分成的四個間距相等
應用在移動端，整個黃色為全屏寬度（所以這裡圖片的大小不是真實的大小，如iphone 5那就是320px，6就是375px，6s就是414px等等）
相容安卓4.0以上（悄悄透露下安卓4.3- 屬性calc不支援）
html & css （no js）

方法不唯一，歡迎大家把自己解決方案分享到評論區

答案分割線————

一、flex方法

1、插入四個空標籤，設定flex:1，這個可能是大家最先想到的。

<ul class="share-list">
    <li class="gap"></li>
    <li class="share-item"></li>
    <li class="gap"></li>
    <li class="share-item"></li>
    <li class="gap"></li>
    <li class="share-item"></li>
    <li class="gap"></li>
</ul>
複製程式碼

.share-list{
    display: flex;
}
.share-item{
    width: 60px;
    height: 60px;
}
.gap{
    flex: 1;
    width: 1%;
}
複製程式碼

2、第一個和第三個設定flex為1，第二個為icon的固定寬度；內嵌一層處理具體的icon寬度

<ul class="share-list">
    <li class="share-item"><div class="item-inner"></div></li>
    <li class="share-item"><div class="item-inner"></div></li>
    <li class="share-item"><div class="item-inner"></div></li>
</ul>
複製程式碼

.share-list{
    display: flex;
}
.share-item:nth-child(1),
.share-item:nth-child(3){
    flex: 1;
    width: 1%;
}
.share-item:nth-child(2){
    width: 60px;
}
.item-inner{
    width: 60px;
    margin-left: auto;
    margin-right: auto;
}
複製程式碼

3、對justify-content: space-between;進行變通

每個間隙的寬度 = （100% - 60px * 3）/ 4 = 25% - 45px

先外套一層wrap，設定左右的padding各位25%，再對list設定負的左右margin各位45px（相當於左右的padding減少了45px），得到第一個和最後一個間隙；中間的間隙通過justify-content: space-between;自由分配

<div class="share-list-wrap">
  <ul class="share-list">
      <li class="share-item"></li>
      <li class="share-item"></li>
      <li class="share-item"></li>
  </ul>
</div>
複製程式碼

share-list-wrap{
    padding-left: 25%;
    padding-right: 25%;
}
.share-list{
    display: flex;
    margin-left: -45px;
    margin-right: -45px;
    justify-content: space-between;
}
複製程式碼

4、高階justify-content: space-between;法

直接使用list的before和after偽元素參與佈局

  <ul class="share-list">
      <li class="share-item"></li>
      <li class="share-item"></li>
      <li class="share-item"></li>
  </ul>
複製程式碼

.share-list{
    display: flex;
    justify-content: space-between;
}
.share-list:before,
.share-list:after{
    content: "";
}
.share-item{
    width: 60px;
    height: 60px;
}複製程式碼

二、絕對定位

計算各個位置，第一個位置為25% - 60px

75%，第二個為50% - 60px

50%，第三個位置為75% - 60px*25%

這裡就不再多講，根據上面的間隙寬度計算公式總會算出來的，可能一開始想錯了，調整下就對了。

最終的計算公式為：（假設n為間隙數，w為圖示的寬度）

第i圖示的位置為: i/n (%) - w(n-i)/n (px)，結合left和transform表示就是

left: i/n*100%;
transform: translate( -(n-1)/n*100%,0);複製程式碼

三、float方法

設定第二個為絕對定位在中間；第一個的寬度為50%，padding-right為30px，第二個的寬度為50%，padding-left為30px，然後裡面居中

.share-item:nth-child(2){
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 60px;
}
.share-item:nth-child(1),
.share-item:nth-child(3){
    float: left:
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.share-item:nth-child(1){
    padding-right: 30px;
}
.share-item:nth-child(3){
    padding-left: 30px;
}
.item-inner{
    display: inline-block;
    vertical-align: middle;
}複製程式碼