資訊專欄INFORMATION COLUMN
摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現(xiàn)微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩(wěn)定老連不上。設置一下就好了實現(xiàn)微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。
前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎知識的中心思想，我們開課啦（每周四）。
場景實戰(zhàn)這塊內(nèi)容每個人的內(nèi)容都不一樣。所以最近的更新基本都是我遇到并解決掉的問題。后期會吧他們的內(nèi)容貼地址。
我們要講什么？這節(jié)還是聊天消息中遇到的問題，群組消息之頭像，哈哈是不是感覺好熟悉，對的是我之前拋出的一個問題。
我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。會成為如下效果。今天我們就是要實現(xiàn)一下它。
效果地址，本來是在JSRun的，但是大哥最近有點不穩(wěn)定老連不上。如果你說什么Flex我不會啊，之前寫的Flex的教程一發(fā)入魂。
看第一個效果（avatar3）一個在上，兩個在下，想想有什么屬性適合？flex-wrap 用來規(guī)定內(nèi)容放不下，如何換行
nowrap(不換行)（默認值）
wrap(換行，第一行在上方)（兩個在上，一個在下）
wrap-reverse(換行，第一行在下方)（兩個在下，一個在上）
是不是發(fā)現(xiàn)，效果對了，但是排序的頭像錯了？微信頭像是加群時間升序的。不用擔心，渲染的時候取反就ok，負負得正嘛。。
頭像等分，我是參照100px。一個90px,兩個45px，三個30px。然后使用百分比實現(xiàn)。為什么要用百分比呢？因為你也不能保證所有地方都是100px吧。
然后你是不是發(fā)現(xiàn)多行的時候，間距有問題？align-content 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。設置一下就好了
background-image 實現(xiàn)微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。
這個效果的實現(xiàn)依賴于多重背景實現(xiàn)，background --MDN
效果地址，寫起來感覺比上一個方案要簡單一點，但是，還是不好寫。我只寫了前幾個。
文檔流+after/before填充效果地址，基本上屬于看到哪里不對改哪里，操作上來說，比上兩個方案要簡單一些。
需要換行的地方插入br標簽，然后水平居中。垂直居中使用padding。
方案同上垂直居中換成table-cell。等其他方法。
grid
方案優(yōu)缺點| 方案 | 理解程度 | 位置控制 | 描述 |
|---|---|---|---|
| flex | 易 | 弱 | 很好理解，思路清晰，但是無法對于設計稿精細微調(diào) |
| 背景圖 | 難 | 強 | 高可控性，但是代碼復雜，不易理解修改 |
| 絕對定位 | 難 | 強 | 高可控性，但是代碼復雜，不易理解修改，比背景圖還是要好理解一點 |
| 文檔流 | 中 | 中 | 可控性較好，但是代碼無關(guān)聯(lián)，易于修改。不推薦。 |
| grid | 中 | 強 |
你有什么方案可以在評論區(qū)留言討論
今日分享-TypeScript快速入門
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/55044.html
摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現(xiàn)微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩(wěn)定老連不上。設置一下就好了實現(xiàn)微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/...
摘要：我們先來了解一下需求，微信大家都有吧，拉個群注意觀察群頭像。實現(xiàn)微信頭像布局效果地址，本來是在的，但是大哥最近有點不穩(wěn)定老連不上。設置一下就好了實現(xiàn)微信頭像布局效果地址，我還是個孩子，寫起來真的煩啊，我就寫前幾個好不好。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/...
閱讀 3055·2021-11-25 09:43
閱讀 1033·2021-11-24 10:22
閱讀 1359·2021-09-22 15:26
閱讀 688·2019-08-30 15:44
閱讀 2468·2019-08-29 16:33
閱讀 3700·2019-08-26 18:42
閱讀 914·2019-08-23 18:07
閱讀 1837·2019-08-23 17:55
