移動端平分布局延伸

2022-02-25 02:21:21 字數 987 閱讀 6269

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

.share-list

.share-item

.gap

.share-item

演示:

.share-item

.share-item span

第二種:flex方法

.share-item span
以下**中不再寫文字居中的**了,有問題還請參照上面這兩個。回到正文主題。

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

.share-list

.share-item:nth-child(1),

.share-item:nth-child(3)

.share-item:nth-child(2)

.item-inner

看了一下**,發現不適合拓展到多個平分,不建議使用(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

//code from 

.share-list-wrap

.share-list

演示:

移動開發分布式系統

移動開發分布式系統,分布式系統中可橫向擴充套件是乙個相當重要的特性,加機器能解決的問題都不是問題。那麼如何實現乙個能夠實現橫向擴充套件的訊息佇列呢?我們知道資料庫的qps是一定的,而上層應用一般可以橫向擴容,這個時候如果到了雙11這種請求突然的場景,資料庫會吃不消,那麼我們就可以引入訊息佇列,將每個...

微控制器彩燈移動實驗 實驗室分布目錄

實驗室分布目錄 2號教學樓 f5 2 503 繪畫基礎實驗室 2 504 繪畫基礎實驗室 2 505 傳媒攝影實驗室 影像技術綜合實訓室 2 506 廣告創作室 2 507 藝術創作室 3號教學樓 f1 3 101 建築製圖室 3 102 土工實驗室 3 103 土工實驗室 3 104 流體力學實驗...

移動計算技術與分布式系統兩老師首次課的一些話記錄

2010 11 8 移動計算技術第一次課胡健1 一些零散的記錄。電信移動業務 wearable computing 螢幕 特殊眼鏡 當今十年計算機圍繞網路。anytime anywhere.對計算概念的擴充套件。ip到移動ip。移動計算技術的應用框架 全國電子科大唯一總結?對什麼的全貌的理解。職業規...