移動端平分布局延伸

標籤：

原文連結：http://caibaojian.com/mobile-just-center.html

flex方法

1、插入四個空標籤，設定flex:1，這個答案是最多的（該方法適合用到多個布局，但代碼有點臃腫，看個人喜好，有需要可以用）

<ul class="share-list">    <li class="gap"></li>    <li class="share-item"><span>文字置中</span></li>    <li class="gap"></li>    <li class="share-item"><span>前端開發部落格</span></li>    <li class="gap"></li>    <li class="share-item"><span>http://caibaojian.com</span></li>    <li class="gap"></li>    <li class="share-item"><span>碼農頭條</span></li>    <li class="gap"></li></ul>

.share-list{    display: flex;}.share-item{    width: 60px;    height: 60px;}.gap{    flex: 1;    width: 1%;}.share-item{width:60px;height:60px; background:orange; }

示範：

如何?文字置中

根據之前寫過的一篇《移動端垂直置中對齊》：http://caibaojian.com/mobile-translate.html 就可以幫我們實現以上的移動端水平置中對齊。（歡迎留言分享更多方法）

第一種：transform+相對定位（推薦使用，相容性較好，但需要加一個寬度）

.share-item{width:60px;height:60px; background:orange; position:relative;}.share-item span{position:absolute; left:50%; top:100%; min-width:80px; transform:translate(-50%,0); text-align:center;}

第二種：flex方法

.share-item span{ display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center; white-space:nowrap; margin-top:100%;}

以下代碼中不再寫文字置中的代碼了，有問題還請參照上面這兩個。回到本文主題。

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;    marigin-left: auto;    margin-right: auto;}

看了一下代碼，發現不適合拓展到多個平分，不建議使用（PS：如果你發現可以改善，請告知我）

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

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

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

通過上面的計算公式，我們同樣拓展到四個。每個間隙寬度=（100%-60px*4)/5 = 20% - 48px

<div class="share-list-wrap">  <ul class="share-list">    <li class="share-item"><span>微博分享</span></li>    <li class="share-item"><span>分享</span></li>    <li class="share-item"><span>http://caibaojian.com/</span></li>    <li class="share-item"><span>好友</span></li>  </ul></div>

//code from http://caibaojian.com/mobile-just-center.html.share-list-wrap{    padding-left: 20%;    padding-right: 20%;}.share-list{    display: flex;    margin-left: -48px;    margin-right: -48px;    justify-content: space-between;}

示範：

 

移動端平分布局延伸